導航條周圍不必要的「空白」空間

所以我對css/HTML（兩個月左右）非常陌生，我正在一個網站的主頁上工作，該網站包含一個標題圖像，Youtube嵌入式播放器，和一個導航欄。第一次在這裏發佈btw，無論如何，它花了我一段時間，但我終於用中間/自動對齊我的網站，使用「包裝」，任何瀏覽器，或者如果你要放大和縮小瀏覽器將始終保持居中。現在我設法做到了這一點，但我的問題是導航欄似乎有這個不必要的白色/空白空間附加到它的末尾，就像整個導航欄擴展的方式進一步然後實際的導航鏈接然後創建一個底部滾動條，我不想。下面會有圖片，但我可以告訴的是，當我在瀏覽器中突出顯示它時。如果任何人都可以幫助我解決這個問題，所以我不需要有一個底部滾動條，非常感謝，謝謝！！[在這裏您可以看到導航欄右側的所有空白空間！導航條周圍不必要的「空白」空間

Click here for image of problem, Notice the navbar extends to the right too far

這裏是CSS

<style> 

*{ 
margin:0; 
padding:0; 
} 

body{ 
text-align:center; /*For IE6 Shenanigans*/ 
} 

#wrapper{ 
width:960px; 
margin:0 auto; 
text-align:left; 
} 


#navigation { 
    position:relative; 
    left:100px; 
    top:10px 

} 

#navigation li { 
    list-style: none; 
    display: block; 
    float: left; 
    margin: .5em; 

<!--spacing between navbar--> 
    padding-right: 20px; 
    padding-left: 25px; 

} 


#navigation li a { 
    display: block; 
    text-decoration: none; 
    font-family: arial, sans-serif; 
    color: #000000; 
    font-size: 1.09em; 
    margin: -.01em; 
} 

#navigation li a:hover { 
color: #0000FF; 
    text-decoration: underline; 
} 





#video1 
{ 
    margin-left:83px; 
    margin-top:40px; 
    position:relative; 
} 


#mainlogo { 
    position:relative; 
    display: inline; 
    left:300px; 
    top:15px; 
} 





/** 
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) 
* http://cssreset.com 
*/ 
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
content: none; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
} 


</style>

這是HTML

</head> 




<body> 
<div id="wrapper"> 


<div id="mainlogo"> 
<a href="http://s1287.photobucket.com/user/jakecan13/media/HeaderTest- 
    1_zps78d21de6.png.html" target="_blank"><img 
    src="http://i1287.photobucket.com/albums/a628/jakecan13/HeaderTest- 
1_zps78d21de6.png" alt=404" height=55" width=370" photo HeaderTest- 
1_zps78d21de6.png"/></a> 

</div> 





<ul id="navigation"> 
<li><a href="#Video">Video</a></li> 
<li><a href="http://breakfastcircle.tumblr.com/">Photo</a></li> 
<li><a href="#Contact">Contact</a></li> 
<li><a href="#Store">Store</a></li> 
</ul> 



<div id="video1"> 
<iframe src="http://www.youtube.com/embed/GUEZCxBcM78?rel=0" width="800" height="500" 
frameborder="0" allowfullscreen></iframe> 

</div> 


</div> 

</body> 
</html>

來源

2013-04-23 Jakob Kannon