'Bootstrap 3 - Why is row class is wider than its container?

I just started using Bootstrap 3. I am having a difficult time understanding how the row class works. Is there a way to avoid the padding-left and padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

twitter-bootstrap twitter-bootstrap-3

Solution 1:^[1]

In all grid systems, there are gutters between each column. Bootstrap's system sets a 15px padding on both the left and the right of each column to create this gutter.

The issue is that the first column should not have half a gutter on the left, and the last should not have half a gutter on the right. Rather than use some sort of .first or .last class on those columns as some grid systems do, they instead set the .row class to have negative margins that match the padding of the columns. This "pulls" the gutters off of the first and last columns, while at the same time making it wider.

The .row div should never really be used to hold anything other than grid columns. If it is, you will see the content shifted relative to any columns, as is evident in your fiddle.

UPDATE:

You modified your question after I answered, so here is the answer to the question you are now asking: Add the .container class to the first <div>. See working example.

Solution 2:^[2]

With bootstrap 3.3.7 this problem is solved wrapping the .row with .container-fluid.

Solution 3:^[3]

See my reply below to similar post.

Why does the bootstrap .row has a default margin-left of -30px?

You basically use "clearfix" instead of "row". It does the exact same as "row" excluding the negative margin.

Solution 4:^[4]

I used the row class inside the container class and still had the some problem. When I added margin-left: auto; margin-right: auto; to the .row class it worked fine.

Solution 5:^[5]

@Michelle M. should receive full credit for this Answer.
She said in one of the Comments:

Adding the 'mx-auto' class in bootstrap 4 fixed the overflow issue for me.

You would need to update your first div Element like so:

<div class="row mx-auto" style="background:#000000">

No need to do this for all Nested-Rows (if you have them).
Just add mx-auto to the most-outer row (or Rows) to avoid the Vertical-Scrollbar.
Do not Override the behavior of all Bootstrap Rows by adding a "row" class to replace the Margins.

Solution 6:^[6]

For any future developers debugging this problem:

Bootstrap sets the padding for row columns, so none of the contents of a row should appear outside the container. If you're experiencing this and you are using bootstrap's grid system correctly using the col-... classes, it's likely that you have additional CSS somewhere resetting the padding on the columns.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Seonghyeon Cho
Solution 2	horcrux
Solution 3	Community
Solution 4	batman
Solution 5	MikeTeeVee
Solution 6	JSideris

'Bootstrap 3 - Why is row class is wider than its container?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]