居中导航列表

Question

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

＆＃13;

＆＃13;

			/* 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 */

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加

nav ul{
  padding: 0;
}

Answer 2

添加以下代码以删除'空格'：

ul
{
 padding: 0;   
}

在这里摆弄：http://jsfiddle.net/yyetw0dm/