Section container overlapping on mobile

Hi All,

I’m having a problem with the portfolio I’m trying to build.

As you can see from the photos below, the sections are overlapping on the live site on mobile.
I don’t have this issue in the preview or while using the chrome inspect but for some reason it happens on an actual phone. I tried it in both Chrome and Safari.

I also initially tried creating this page using multiple divs instead of section but had the same results.

Does anyone have any ideas what could be wrong?


Some browsers (Safari) will not accept margins for sections, try using padding instead of margin.

In general I would suggest to place a div/container into each section, and place all elements into the container, so you can give all the sections the same class/settings.

@Eli11 I changed to padding and moved everything in the section into a div but I seem to still be having this issue.

Is there anything else I might be doing wrong?

I still see margin in most of the sections (in certain screen sizes).
Try to remove them (remove the 0px as well).
I also wonder why are you setting left and right padding to the section instead of setting it to flex center?

@Eli11 I’m only having the overlap problem on tablet and below devices, do I still need to remove the margins on the larger devices?

I’m using the section padding because I’m trying to go for a an off center layout, is there a better way to do this?

I get the overlap problem on my iMac 27" on Safari.
If it’s not the section margin than I’m not sure what else might cause it… :thinking: