导航条周围不必要的“空白”空间

所以我对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