title: Bootstrap 3 text-align: center not working
body: <p>I have read through multiple questions and I know it's as simple as adding <code>text-align: center</code>, however that's not working for me.</p>
  
  <p>I have also tried to add <code>text-center</code> to my wrapper <code>&lt;div&gt;</code> but that did not work either.</p>
  
  <p>Current result:
  <a href="https://i.stack.imgur.com/YvQ9p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YvQ9p.png" alt="enter image description here"></a> 
  (Hard to see but it's all white-space to the right.  I tried to add a black border with <code>style="border: 1px black;"</code> but nothing showed up...)</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="btn-group btn-group-justified" id="dataTableSegmentedControl" role="group" aria-label="..."&gt;
          &lt;div class="btn-group" role="group"&gt;
              &lt;button type="button" class="btn btn-default active"&gt;Dashboard&lt;/button&gt;
              &lt;button type="button" class="btn btn-default"&gt;Events&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#dataTableSegmentedControl button {
      width: 25%;
      border-radius: 0;
      border-top: none;
      border-left: none;
      border-right: none;
      border-bottom-width: 3px;
      display: inline-block;
      margin: auto;
      margin-bottom: 8px;
      margin-top: 8px;
  }
  </code></pre>