title: Unable to center multiple col's in bootstrap 3
body: <p>I'm trying to center 7 inline columns within a row that I created using bootstrap. I've tried every solution that I could find (except for absolute positioning, which I don't want). My original plan was to add an extra container div around the list of col-md-1 divs, but when I do, the div is sets its self to fit 100% of the row rather than only 100% of the width of all the cols. My code is as follows:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12" style="background-color: pink;"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-md-1"&gt;
                      Hello
                  &lt;/div&gt;
                  &lt;div class="col-md-1"&gt;
                      Hello
                  &lt;/div&gt;
                  &lt;div class="col-md-1"&gt;
                      Hello
                  &lt;/div&gt;
                  &lt;div class="col-md-1"&gt;
                      Hello
                  &lt;/div&gt;
                  &lt;div class="col-md-1"&gt;
                      Hello
                  &lt;/div&gt;
                  &lt;div class="col-md-1"&gt;
                      Hello
                  &lt;/div&gt;
                  &lt;div class="col-md-1"&gt;
                      Hello
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container .row .col-md-12 .row {
      text-align: center;
  }
  .col-md-1 {
      width: 125px;
      height: 80px;
      margin-right: 7px;
      background-color: #E6E6E6;
      display: inline-block;
  }
  .col-md-1:last-child {
      margin-right: 0;
  }
  </code></pre>
  
  <p>Also, here is a bootply:</p>
  
  <p><a href="http://www.bootply.com/116478" rel="nofollow">http://www.bootply.com/116478</a></p>