Sections and containers don't stretch to 100% viewport (justified left on small devices)

Hi there! I’ve spent a few days attempting to work on my responsive design, and I figured I’d try asking the forum before continuing down rabbit holes of videos and changes that don’t end up helping.

I’m struggling to make my design responsive from desktop to mobile, and it seems like my main issue is the sizing of sections and containers. No matter what I do, the sections and containers seem to be justified to the left of the viewport, with some sort of padding on the righthand side, even though there is NO padding or margin applied. I’ve been attempting to fix with flexboxes, different units of width, max widths, etc. and I can’t seem to fix it. I might be missing certain settings on parent elements.

Please help if you can!
Kara


Here is my site Read-Only: Webflow - Meta V2

Hi Kara. Best tip I can give you is to find where the responsive problem is and reverse engineer from there. Something you can do is go to tablet or mobile, scroll to the right and hover over the white space until you see a blue box - that’s usually where the problem is.

In your case, the footer has an element that has a whole lotta padding.
Screen Shot 2022-07-14 at 10.11.27 PM

Thanks so much!! I couldn’t figure out while the devices were “scrollable” off to the side. I knew I was missing something somewhere. I also thing one of my images is cutting over past the viewport. Thanks- learning a ton!