css - 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

question from:https://stackoverflow.com/questions/16704893/twitter-bootstrap-white-gap-on-right-side-of-page

Answer 1

This might be a little late but I found the other answers to be misleading.

It is true that the row class is what is causing the issue, but that is because it is always supposed to be placed inside a container element.

from http://getbootstrap.com/css/ :

Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.

The container element usually has a -15px padding on both right and left and the row class has a 15px padding on right and left. The two cancel each other out. If one of the two is not present you will see extra space.