title: Center align divs inside parent div
body: <p>My pen: <a href="http://codepen.io/helloworld/pen/IGsoe" rel="nofollow">http://codepen.io/helloworld/pen/IGsoe</a></p>
  
  <p>I want to center align all divs with the yellow border how can I do that?</p>
  
  <p>I tried margin:0 auto; on the parent container but that did not help.</p>
  
  <p>The "items" with the yellow border should keep their percentage width. Do not change this to fixed pixel values.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="table"&gt;
  &lt;div id="navigationWrapper"&gt;
  &lt;div class="table"&gt;
    &lt;div id="left"&gt;&lt;image width="40px" /&gt;&lt;/div&gt;
  &lt;div id="navBar" style="width:100%; height: 100px; background-color: grey;"&gt;
  
    &lt;div class="cellContainer"&gt;
          &lt;div class="alarmTemplate"&gt;A&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cellContainer"&gt;
          &lt;div class="alarmTemplate"&gt;B&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cellContainer"&gt;        
          &lt;div class="alarmTemplate"&gt;C&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cellContainer"&gt;        
          &lt;div class="alarmTemplate"&gt;D&lt;/div&gt;
      &lt;/div&gt; 
  
  &lt;/div&gt;
    &lt;div id="right"&gt;&lt;image width="40px" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="navigationWheeler"&gt;test&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
    padding: 0;
    margin: 0;
    width:100%;
    height:100%;
  }
  
  .cellContainer {
      margin:0 auto;
      width: 20%;
      float: left;
      background:black;
  }
  
  .alarmTemplate{
    height:80px; 
    margin-top:10px;
    margin-bottom:10px;
    margin-left:10px;
    margin-right:10px;
    background:lightgray;
    border:yellow solid 2px;
  }
  
  #navBar, #right, #left, #navigationWheeler {
    height:80px;
    background:yellow;
    display:table-cell;
    vertical-align:middle;
   }
  
  .table {
    display:table;
    min-width:100%;
    margin:0 auto;
  }
  #right, #left, #navigationWheeler {
    width:40px;
  }
  
  #navigationWheeler{
    background:green;
    text-align:center;
  }
  </code></pre>