title: Firefox doesn't like margin auto with flex box model
body: <p>I am trying to center the header > section. It works fine with chrome and opera but firefox push to the left side. I created a class called <code>.body</code> with <code>width: 960px</code> and <code>margin: 0 auto</code>. It doesn't recognize <code>margin: 0 auto</code> on firefox (i am using firefox 18). </p>
  
  <p>I have tried setting the <code>display</code> value to <code>inline-block</code> for <code>.body</code> class. It does centers it but it pushes the <code>nav</code> to bottom (for all browsers).</p>
  
  <p>This is what i am trying to do</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header id="header"&gt;
  &lt;section class="body box"&gt;
    &lt;section class="flex1"&gt;
      &lt;a&gt;MyWebsiteName&lt;/a&gt;
    &lt;/section&gt;
    &lt;nav class="nav-list flex1"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href=""&gt;Login&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Register&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Help&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.box {
    display: -webkit-box;
    display: -moz-box;
    display: -o-box;
    display: box;
   -webkit-flex-direction: row;
   -mox-flex-direction: row;
   flex-direction: row;
   -webkit-box-align: center;
   -moz-box-align: center;
   -o-box-align: center;
   box-align: center;
  }
  
  .flex1 {
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   -o-box-flex: 1;
   box-flex: 1;
  }
  
  .body {
    clear: both;
    width: 960px;
    margin: 0 auto;
  }
  
  header {
    background: #0C2C52;
    box-shadow: 0 0 .2em .1em rgb(78, 76, 76);
   -webkit-box-shadow: 0 0 .2em .1em rgb(78, 76, 76);
   -moz-box-shadow: 0 0 .2em .1em rgb(78, 76, 76);
   margin-bottom: 1em;
   padding: 1em 0;
  }
  
  header &gt; section {
    height: inherit;
  }
  
  #header section.flex1 {
    display: inline-block;
  }
  
  .nav-list {}
  
  .nav-list &gt; ul {
    float: right;
  }
  </code></pre>