使用Flexbox均匀分布元素

Question

我从Flexbox开始，我试图将一行三列放在文档的中心。我已经尝试了下面的代码（用Sass编写），但正如你在屏幕截图中看到的那样，三个元素没有完全居中（它们之间没有相同的空间）：

标题的HTML：

<header>
  <nav>
    <ul>
      <li><a href="#" class="active">ELE 1</a></li>
      <li><a href="#">ELEMENT 2</a></li>
      <li><a href="#">ELEMENT 3</a></li>
    </ul>
  </nav>
</header>

标题的SCSS：

header {
  height: 80px;
  width: 100%;
  background-color: $dark-grey;
}

nav {
  height: inherit;
  max-width: 800px;
  margin: auto;
  text-align: center;
  display: flex;
  align-items: center;
  & ul {
    width: 100%;
    display: flex;
    & li {
      flex: 1 0 auto;
      & a, a:visited {
        color: $white-alpha;
      }
      & a.active {
        color: $white;
      }
    }
  }
}

我在这个CodePen中重新创建了问题，因为你可以看到真实的例子。我做错了什么？感谢。