title: Horizontally center two divs in a row with Bootstrap
body: <p>I have a div that acts as a content wrapper, which I have centered. Inside it is contained two divs that I want to appear side by side, but in the center of the screen. I can do this by setting both to <code>col-md-6</code>, thus giving a symmetrical appearance, but I only want them to be 4 cols wide.</p>
  
  <p>There is also a gap between the two divs which I'd like to make smaller. Can anyone help?</p>
  
  <pre><code>&lt;div class="col-sm-10" style="margin: 0 auto; float: none;"&gt;
  
      &lt;div class="col-md-4"&gt;
          &lt;div class="panel panel-primary"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;Panel title&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              Panel content
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-4"&gt;
          &lt;div class="panel panel-primary"&gt;
            &lt;div class="panel-heading"&gt;
              &lt;h3 class="panel-title"&gt;Panel title&lt;/h3&gt;
            &lt;/div&gt;
            &lt;div class="panel-body"&gt;
              Panel content
            &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried the usual <code>margin: 0 auto;</code> and <code>text-align: center;</code>.</p>