Twitter bootstrap white gap on right side of page

Question

I am having an issue with my responsive stylesheet with Twitter Bootstrap. The site shows up fine with no issues but for whatever reason the responsive tablet and phone have this huge white gap to the right of the page. Its not the scroll bar issue its a huge white gap

http://i.imgur.com/JeRRRqq.png

I dont believe I have changed to much at all here. Nothing with width or anything. Inspected the objects in Chrome and couldnt see anything overflowing over width wise

Answer 1

Have you tried:

html, body { overflow-x: hidden; }

Can you post a fiddle?

Answer 2

I just had a very similar problem, and after spending some time, I realized I had applied CSS styling adding padding of 0px on both left and right of a container-fluid class, and therefore the styling overrode the default -15px padding needed on container-fluid to hold rows in their proper place.

Answer 3

I've had a similar issue on mobile devices. The problem was that I had hidden an element on smaller screen sizes, but forgot its parent container. This container was still being rendered even though its content was empty, which lead to a big white gap on the right site. Hiding the parent element instead of the child solved this for me.