title: Why does the bootstrap .row class have a default margin-left of -30px?
body: <p>When I do boostrap I have to use the class "row" ...</p>
  
  <p>When you look at my test design:</p>
  
  <p><img src="https://i.stack.imgur.com/o3K1I.png" alt="enter image description here"></p>
  
  <p>Why I am forced with a margin-left of -30px?</p>
  
  <p>With this html I would expect 3 rows sharing each column 33% of the whole available width:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div style="background-color: pink;" class="span4"&gt;
              This is a label
          &lt;/div&gt;
          &lt;div style="background-color: violet;" class="span4"&gt;
              This is a textbox
          &lt;/div&gt;
          &lt;div style="background-color: slateblue;" class="span4"&gt;
              This is a button
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div style="background-color: orange;" class="span4"&gt;
              This is a label
          &lt;/div&gt;
          &lt;div style="background-color: orangered;" class="span4"&gt;
              This is a textbox
          &lt;/div&gt;
          &lt;div style="background-color: yellow;" class="span4"&gt;
              This is a button
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div style="background-color: seagreen;" class="span4"&gt;
              This is a label
          &lt;/div&gt;
          &lt;div style="background-color: green;" class="span4"&gt;
              This is a textbox
          &lt;/div&gt;
          &lt;div style="background-color: lightgreen;" class="span4"&gt;
              This is a button
          &lt;/div&gt;
      &lt;/div&gt;    
  
  &lt;/div&gt;
  </code></pre>
  
  <p>The gray area with the buttons is from this code:</p>
  
  <pre><code>&lt;div style="background-color: gray;"&gt;
      &lt;div class="pager"&gt;
          &lt;div class="pull-left"&gt;
              &lt;a href="#" class="btn" data-bind="css: { disabled: !hasPrevious() }, click: previous"&gt;previous&lt;/a&gt;
              &lt;a href="#" class="btn" data-bind="css: { disabled: !hasNext() },     click: next"&gt;next&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="pull-right"&gt;
              &lt;span data-bind="text: stepNumber()" /&gt;
              &lt;span&gt;/&lt;/span&gt;
              &lt;span data-bind="text: stepsLength" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
  
      &lt;!-- ko compose: { model: activeStep,
          transition: 'entrance' } --&gt;
      &lt;!-- /ko --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ol>
  <li><p>Why does the whole 3-column design fall together when I remove the -30px margin-left?</p></li>
  <li><p>How should I change my code to really get a 3 column layout each column having the same width. This is what span4 should do.</p></li>
  </ol>