Twitter Bootstrap 3.0 row wider than window

Question

I was fiddling around with Twitter Bootstrap and noticed that my .row was wider than the screen length.

Here is the example

When bootstrap 3.0 came out I did not experience this.

The extra space on the right sides comes from margin-right: -15px;

I have been glaring at this for hours without making any progress on why or how I am fooling myself and searching has not been helpful.

I'm sure I am missing the obvious. I would like to understand why there is this space beyond the window width (forcing a scroller) and how to avoid it. I thought that a row would match 100%

Answer 1

The correct solution (https://getbootstrap.com/docs/3.3/css/#grid-example-fluid) is to use the container-fluid class on the surrounding div:

<div class="container-fluid">
  <div class="row">
    Content
  </div>
</div>

Answer 2

I fixed it by just removing margin-left & margin-right from .row in bootstrap and also by setting it's width to 100%

Answer 3

EDIT >>

This was the previously accepted answer. Undeleted if anyone sites with a old version.

EDIT <<

It is a bug

Which seems to have been unfixed for while. Maybe a proper fix in 3.1.

Best suggestion seems to be "overflow-x: hidden on body element.

https://github.com/twbs/bootstrap/issues/10711

Other than that they added/clarified some of it in this commit

Especially this line "Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .row"