title: why bootstrap's container class has padding while row class has negative margins to compensate the padding
body: <p>Bootstrap's <code>container</code> class has paddings on both side:</p>
  
  <pre><code>.container-fixed(@gutter: @grid-gutter-width) {
    padding-left:  (@gutter / 2);
    padding-right: (@gutter / 2);
  }
  </code></pre>
  
  <p>While <code>row</code> class has negative <code>margins</code>:</p>
  
  <pre><code>.make-row(@gutter: @grid-gutter-width) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
  </code></pre>
  
  <p>So when we put html like that:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      ...
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the content within the <code>row</code> class takes all the space from left to right side of the container offseting the <code>padding</code> using negaive <code>margins</code>. I'm wondering why this approach is used? I've also seen it being used for navbars, specifically <code>navbar-right</code> class has negative margin.</p>