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

One way to solve this issue is to use class="container row" instead of class="row" , this solution will make the row fit inside the container without horizontal overflow.

Because you don't need to use row-fluid anymore. All row does is perform the cleafix and apply the negative margin. This is typically correct for an accurate grid system. You can use containers or instead of using "row" you just use "clearfix" and you'll have the exact same behavior as before with no margin.

Class row adds a

1. clearfix
2. negative margin-left
3. negative margin-right

Bootply: http://www.bootply.com/120858

With negative margin at the beginning:

<div class="row">            
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

Without negative margin at the beginning:

<div>     
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

question 1:

the spans all have a margin-left of 30px to create some space between the single blocks. this space should only appear between the single spans and not at the beginning (or end) of the row. to accomplish this, there are several possibilitys - for example:

• create a negative margin with the space-with on the row (this is what bootstrap does)
• use the :first-child selector to remove margin-left on the first span in a row
• [to be continued]

i can only assume the bootstrap uses the first option because it's more compatible with older browsers (most likely IE 7 and below).

a little example: lets say your spans have a width of 100, a space of 10 and there are 3 in a row.

• your total row-width in this case should be 320 (100 + 10 + 100 + 10 + 100 = 320)
• a single span has a width of 110 (100 width + 10 magin-left)
  • simply adding those up would give you a width of 330 and an ugly space of 10 at the beginning (10 + 100 + 10 + 100 + 10 + 100 = 330)
  • "subtract" 10 with one of the listed methods (-10 + 10 + 100 + 10 + 100 + 10 + 100 = 320)
    • hooray, we've created great things with the power of math

question 2 if you use span4s, you already have 3 columns of the same width. you don't need to change anything.