由于某种原因，我的导航菜单并未完全居中

Question

我的导航菜单始终从中心点稍微偏向右侧。

像这样的＆gt; http://i.imgur.com/4sNo8K7.png

＆＃13;

＆＃13;

#nav {
  display: block;
  text-align: center;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: yellow;
}
#nav li {
  display: inline-block;
  padding: 1% 2% 1% 2%;
  list-style: none;
  background-color: blue;
  width: 5%;
  min-width: 50px;
}
#nav li a {
  color: white;
  text-decoration: none;
}

＆＃13;

<div id="nav">
  <ul>
    <li><a href="index">Home</a>
    </li>
    <li><a href="about">About</a>
    </li>
    <li><a href="contact">Contact</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您必须重置默认ul填充。

#nav ul { 
  padding: 0;
}

body {
  margin: 0;
}
#nav {
  display: block;
  text-align: center;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: yellow;
}
#nav li {
  display: inline-block;
  padding: 1% 2% 1% 2%;
  list-style: none;
  background-color: blue;
  width: 5%;
  min-width: 50px;
}
#nav li a {
  color: white;
  text-decoration: none;
}
#nav ul {
  padding: 0;
}

<div id="nav">
  <ul>
    <li><a href="index">Home</a>
    </li>
    <li><a href="about">About</a>
    </li>
    <li><a href="contact">Contact</a>
    </li>
  </ul>
</div>

Answer 2

您的ul元素左侧有不需要的填充。

这将解决它：

#nav ul { padding:0; }

Fidde here