背景正確的高度？（CSS）

我不知道爲什麼我的無序列表的背景正確長度的長度比它應該長。我仍然對網站開發不熟悉，所以如果你發現我做錯了什麼，請告訴我。這是什麼樣子：http://gyazo.com/a2875f082f6a1424cf8be6d9ecdf100d HTML代碼：背景正確的高度？（CSS）

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <link href="indexCSS.css" rel="stylesheet" type="text/css"/> 
    <title>First webpage</title> 
</head> 
<body> 
    <div id="navBarBlack"></div> 
    <ul id="navBar"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Page 1</a></li> 
     <li><a href="#">Page 2</a></li> 
     <li><a href="#">Page 3</a></li> 
     <li><a href="#">Page 4</a></li> 
     <li><a href="#">Page 5</a></li> 
     <li><a href="#">Page 6</a></li> 
     <li><a href="#">Page 7</a></li> 
     <li><a href="#">Page 8</a></li> 
    </ul> 
    <p id="header">Webpage</p> 
</body> 
</html>

CSS：

#header { 
    text-align: center; 
    font-size: 50px; 
    font-weight: lighter; 
    font-family: sans-serif; 
    color: #818181; 
    margin-top: 30px; 
    position: relative; 
    padding-top: 10px; 
} 

body { 
    background-color: #F2F2F2; 
} 

#navBar li { 
    text-decoration: none; 
    list-style: none; 
    display: inline; 
    padding: 40px; 
    border-right: thin solid white; 
} 
#navBar li:first-child{ 
    border-left: thin solid white; 
} 
#navBarBlack{ 
    text-align: center; 
    background-color: #212121; 
    height: 30px; 
    float: none; 
    margin-top: -7px; 
    width: 2000px; 
    align-self: center; 
    margin-left: -70px; 
} 
#navBar{ 
    text-align: center; 
    float: none; 
    margin-top: -27px; 
} 
#navBar li a { 
    text-decoration: none; 
} 

#navBar li a:visited { 
    color: #8A8A8A; 
} 

#navBar li a:link { 
    color: #8A8A8A; 
} 

#navBar li a { 
    -webkit-transition: color 0.2s ease-out; 
    -moz-transition: color 0.2s ease-out; 
    -o-transition: color 0.2s ease-out; 
    -ms-transition: color 0.2s ease-out; 
    transition: color 0.2s ease-out; 
} 

#navBar li a:hover { 
    color: white; 
}

來源

2014-04-24 user3570739