html - 如何让固定的 100% 菜单居中对齐？

Question

一切都很顺利，直到我决定让我的固定导航菜单全宽。我似乎无法找到一种方法让 ul 在中心对齐，同时将其父容器设置为 100%。它一直居中，直到我将 100% 属性添加到它的父级

JS fiddle :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”。

JSFiddle