Really strange white gap on mobile devices

Question

I know other people have already asked about this before on StackOverflow, but I have been trying to fix this problem for days already with no luck. My website looks great on the computer but when I test it on mobile, a really annoying white space shows up in the right side of the display.

I tried to...

• Set overflow-x: hidden on the body;
• Set overflow-x: hidden on the html (it affected the scroll);
• Set width: 100%, on both body and html;
• I tried removing the navbar, that was apparently overflowing the body, but that didn't solve my problem.

It's like there's a "ghost" lying in that white space, because I also removed all the "padding-left" and "margin-left" from all the elements. Nothing.

Does anyone have a clue?

Here is the link: tomasperone.esy.es.

Thank you.

Answer 1

As a quick fix - add 'overflow: hidden' to the 'container' class.

.container, .container-fluid:overflow: hidden;

Hope this helps!