title: Centering div element inside html header tag
body: <p>I am trying to center my div element with class name <code>toolbar</code> and i have tried using the <code>inline-block</code> property on the div element and <code>text-align: center</code> on the header tag with no luck.</p>
  
  <p>Here is the html </p>
  
  <pre><code>&lt;header&gt;
     &lt;div class="toolbar"&gt;
     &lt;/div&gt;
  &lt;header&gt;
  </code></pre>
  
  <p>and the corresponding css stylings </p>
  
  <pre><code> header{
      width: 100%;
      height: 51px !important;
      position: fixed;
      background-color: white;
      margin: 0 auto;
      box-shadow: 0 1px 3px rgba(0,0,0,0.25);
      -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
      -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.25);
      z-index:100;
      top: 0;
      text-align: center;
  }
  
  .toolbar {
      background: #fff;
      position: fixed;
      z-index: 1000;
      top: 0;
      width: 910px;
      margin: 0 auto;
      padding: 10px 25px;
      display: inline-block;
  }
  </code></pre>
  
  <p>Having no luck centering the inner div element, with the current settings it moves it all the way to the right and if i remove the display on the div, it brings it to the left</p>