title: Can't center a fixed-positioned flexbox with margin: 0 auto
body: <p>I have a problem centering a fixed-postioned flexbox by using <code>margin: 0 auto;</code>. I can change position into relative to make it look like what I want, but a <em>fixed</em> one is what I hope.</p>
  
  <p>Please view it on <a href="http://output.jsbin.com/pubuko" rel="nofollow">JSBIN output</a>, and if you'd like to <a href="http://jsbin.com/pubuko/edit?html,css" rel="nofollow">see the code</a>.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header class="header l-container"&gt;
      &lt;div class="site-title"&gt; &lt;a href="#" class="link"&gt;Home&lt;/a&gt;&lt;/div&gt;
      &lt;nav class="nav-box"&gt;
          &lt;ul class="menu-box"&gt;
              &lt;li&gt;&lt;a href="about.html" class="about link"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/blog/" class="blog link"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="contact.html" class="contact link"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>/* change position into relative or fixed */
  
  .header {
    position: fixed;
      z-index: 100;
  }
  
  
  /* some other settings below */
  
  .l-container { 
      margin: 0 auto;
      padding: 0 6rem;
      max-width: 108rem;
  }
  
  .header,
  .menu-box {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
  }
  
  .header {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  
    .site-title .link {
        float: left;
    }
  
    .menu-box .link {
        float: right;
    }
  
  
  
  
  ul {list-style: none;}
  li {margin-left: 20px;}
  .link {font-size: 20px;}
  </code></pre>
  
  <p>Note: I'd like to center the whole  <code>.header</code> container and use flexbox to make the <code>.site-title</code> and <code>.nav-box</code> separated apart in both ends of <code>.header</code>.</p>