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

Question

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/

Answer 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.