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

I had a very similar issue recently which took me quite sometime to figure out. For me, it was not the usual row/container issue. I was using a form-control to render checkboxes manually. In Bootstrap, all textual elements with form-control have width:100% by default. Having many checkboxes online was causing them to spill over (invisibly) and causing this large white gap on the right. Surprisingly, it wasn't easy to debug this using Chrome Dev tools either.

I am now using the following solution to set the width to auto; (this answer helped):

<input class="form-control form-control-inline" type="checkbox" ... ... .. />

and

.form-control-inline {
  width: auto;
}

Hope it helps someone

Answer 2

Generally this happens because you have a div breaking the boundaries of your set container width,could be a div or sections padding, margin, positioning.. you can use the inspector arrow or overflow:hidden on the container tag to see what section you might have breaking the width.

Answer 3

Also, check to see how you're using containers. They can't be nested, they will cause problems.

You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Source: http://getbootstrap.com/css/#overview-container

Answer 4

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.

Answer 5

I am having the same problem. I discovered the object that was causing the padding to be created was Bootstrap's "row" class.

If you add

.row {
  padding-right: 0px;
  margin-right: 0px;
}

to your CSS file/row objects this should fix at least one of items causing padding on your page.

Answer 6

Add the following meta tag to your HTML

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Also try setting

html, body. div{
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

on the html and body