Padding looks weird on mobile after changes

Hi Wes,

I thought I managed to change the padding on the site to how I like it, and made the following changes:

For the home page:
.flexible-widgets {
padding-top: 80px;
padding-left: 150px;
padding-right: 150px;
padding-bottom: 20px;
}

For the pages:

.site-inner {
margin-top: 150px;
margin-left: 150px;
margin-right: 150px;
}

But I think I must have done something wrong because it looks wrong on mobile. How do I rectify this?

Thank you.