如何获得固定的100％菜单以使其居中对齐？

Question

一切顺利，直到我决定希望固定的导航菜单全屏显示。我似乎找不到找到使ul在中心对齐的方法，而将其父容器设置为100％。在我将100％属性添加到其父项之前一直居中

JS小提琴：https://jsfiddle.net/u504xgey/

nav {
  position: fixed;
  z-index: 1;
  background-color: #ff3300;
  width: 100%;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  transition: color 2s;
}

nav a:hover {
  color: yellow;
}

ul {
  display: block;
  margin: auto;
  list-style: none;
}

li {
  display: inline-block;
  color: #ffffff;
  margin: 10px 40px;
}

<header>
  <nav>
    <ul>
      <li>
        <a href="#landing">
          <h3>Home</h3>
        </a>
      </li>
      <li>
        <a href="#about">
          <h3>About</h3>
        </a>
      </li>
      <li>
        <a href="#projects">
          <h3>Projects</h3>
        </a>
      </li>
      <li>
        <a href="#contact">
          <h3>Contact</h3>
        </a>
      </li>
    </ul>
  </nav>
</header>

Answer 1

只需将您的UL设置为text-align: center，并将您的UL的padding设置为'0'。

https://github.com/ViksaaSkool/AutoFitEditText

Answer 2

只需将margin: 0属性添加到您的正文选择器中即可。

body {
  background-color: #ffffff;
  font-family: "objektiv-mk1", sans-serif;
  color: #fffff;
  margin: 0;
}

Answer 3

或将UL文本居中：

ul{
    margin: auto;
    list-style: none;
    text-align: center;
}

li{
    display: inline-block;
    color: #ffffff;
    margin: 10px 40px;
}