无法将固定位置的 flexbox 居中，边距为：0 auto

Question

我在使用 margin: 0 auto; 将固定位置的 flexbox 居中时遇到问题。我可以将位置更改为相对位置以使其看起来像我想要的，但是 fixed 是我希望的。

请在JSBIN output, and if you'd like to see the code上查看。

HTML

<header class="header l-container">
    <div class="site-title"> <a href="#" class="link">Home</a></div>
    <nav class="nav-box">
        <ul class="menu-box">
            <li><a href="about.html" class="about link">About</a></li>
            <li><a href="/blog/" class="blog link">Blog</a></li>
            <li><a href="contact.html" class="contact link">Contact</a></li>
        </ul>
    </nav>
</header>

CSS

/* 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;}

注意：我想将整个 .header 容器居中，并使用 flexbox 使 .site-title 和 .nav-box 在 .header 的两端分开。

Answer 1

将 left: 0 和 right: 0 添加到固定的 .header 怎么样？ max-width、margin 和 padding 仍将应用，但会从左到右定位。

JSBin

.header {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
}

Answer 2

它会起作用

.header {
    position: fixed;
    z-index: 100;
    left:0;
    top:0;
}

无法将固定位置的 flexbox 居中，边距为：0 auto

Can't center a fixed-positioned flexbox with margin: 0 auto

css

css-position

margin

flexbox

centering

JSBin