将导航列表居中

Question

我在将导航项目居中时遇到了一些问题。确切的问题是，在左侧，有一个小空白不响应我的 :hover，我的列表中心也不在我的导航中 text-align:center！

   /* CORE ELEMENTS */
* {
 margin: 0;
 font-family: "Open Sans", Times New Roman;
 font-size: 1em; /* 16px is standaard, als je bv. 24px wilt doe je dus 24/16 = 1.5em */
}
html, body{
 height: 100%;
 margin: 0 auto;
}
footer{
 /**/
}
header{
}
   /* PSEUDO-CLASSES */
a:link {

}
a:visited {

}

a:hover {
 color: #F9F9F9;

}

a:active { 
 color: #171717;
    background-color: #F9F9F9;
}
nav ul li:hover {
    background-color: lightblue;
}
   /* STYLE ELEMENTS */
h1 {
 font-size: 2em;
}

h2 {
 font-size: 1.8em;
}
img {
 display: block;
}
   /* NAV, UL, LI, A */
nav {
 clear: both;
 background-color: #F9F9F9;
 text-align: center;
}
nav ul li{
 list-style-type: none;
 line-height: 5vh;
 width: 33vw;
 display: table-cell;
}
ul {
 border: 1px solid #EEEEEE;
}
a {
 text-decoration: none;
 color: black;
}
   /* HTML ELEMENTS */
section {
  height: 100vh;
}
section:nth-child(1) {
  background: lightblue;
}
section:nth-child(2) {
  background: lightgreen;
}
section:nth-child(3) {
  background: purple;
}
section:nth-child(4) {
  background: red;
}
section:nth-child(5) {
  background: yellow;
}
   /* CLASS & ID */

<h1>WhiteWizard</h1> 
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Answer 1

只需添加

nav ul{
  padding: 0;
}

Answer 2

添加以下代码以删除 'whitespace':

ul
{
 padding: 0;   
}

fiddle 这里：http://jsfiddle.net/yyetw0dm/

将导航列表居中

Centering a navigation list

html

css

html-lists

nav