title: is it wrong for bootstrap3 columns to add up to less than 12? (or, understanding -offset)
body: <p>Short version: is col-x-offset-n applied only to the left, or does it apply to left and right if this is what it needs to make 12? For instance can I just do "col-x-10 col-x-offset-1" to get a 10 column container with 1 extra column on both left and right? It seems to work but this isn't what the documentation suggests should happen.</p>
  
  <p>Longer version: As an example, I'm trying to center a div using bootstrap 3 grid system. At col-xs size I want it to be full width, but above that I want it centered with a little more padding on each side. All docs of course say that the number of columns should total 12. So if I do:</p>
  
  <pre><code> &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-1"&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-10"&gt;
              ...content here...
          &lt;/div&gt;
          &lt;div class="col-sm-1"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>it works as I expect with the two empty col-sm-1 columns acting like padding on the left and right. But I can do it with less markup using -offset:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-10 col-sm-offset-1"&gt;
          ...content here...
          &lt;/div&gt;
          &lt;div class="col-sm-1"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As the bootstrap docs say: "Move columns to the right using .col-md-offset-* classes. These classes increase the <strong>left</strong> margin of a column by * columns." So in this case I have 10 columns, plus 1 column in the offset, plus 1 column in the following empty col-sm-1 div, equals 12 columns.</p>
  
  <p>Now for the question finally: if I remove the final empty col-sm-1 div I still get the same result (page is centered as with both examples before), but my columns now only add up to 11.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-10 col-sm-offset-1"&gt;
          ...content here...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is this okay to do? Is Bootstrap just filling in the last column for me? I would like to just drop it and use only "col-sm-10 col-sm-offset-1" or "col-sm-8 col-sm-offset-2" or "col-sm-6 col-sm-offset-3" (even though these only add up to 11,10,and 9 total columns respectively), but is this really the way to do it or is it just a quirk that it works out okay? It almost seems like bootstrap applies the offset to both left <em>and</em> right if it needs to, but I can't find any documentation to confirm that.</p>
  
  <p>(And maybe with this simple example there is an easier way to do what I describe here, but I'm trying to understand how -offset works, not to just center a simple div with margin: 0 auto; or something like that.)</p>