CSS Navigation zentrieren macht Seite auf einmal zu breit?!?

[Marvin]

Hallo ihr,

erstmal vielen Dank für eure Antworten. Ich dachte, wenn ich euch die beiden Problemstellen zeige, dann ist alles gesagt. Also hier der vollständige CSS-Teil von der Navigation und die vollständige Navigation im HTML-Dokument. Nochmals ganz herzlichen Dank für eure Hilfe!!

#nav {float: left; position: relative; left: 50%; margin: 0 auto; margin-left: -50px; list-style: none; height:38px;  z-index:500; font-family:arial, verdana, sans-serif; }  
  
#nav li.top {position: relative;  
right: 50%; display:block; float:left; height:38px;}  
  
  
  
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#6e6e6e; text-decoration:none; font-size:13px; padding:0 0 0 32px; cursor:pointer;}  
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; }  
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(../images/three_0na.gif) no-repeat right top;}  
  
#nav li:hover a.top_link {color:#ff0031; background: url(../images/three_1n.gif) no-repeat;}  
#nav li:hover a.top_link span {background:url(../images/three_1n.gif) no-repeat right top;}  
#nav li:hover a.top_link span.down {background:url(../images/three_1an.gif) no-repeat right top;}  
  
/* Default list styling */  
  
#nav li:hover {position:relative; z-index:200;}  
  
#nav li:hover ul.sub  
{left:1px; top:38px; background:url(../images/system/bg_body_grad_both2.jpg) 50% -0% repeat-x; padding:3px; border:1px solid #fff; white-space:nowrap; width:130px; height:auto; z-index:300;}  
#nav li:hover ul.sub li  
{display:block; height:30px; position:relative; float:left; width:130px; font-weight:normal;}  
#nav li:hover ul.sub li a  
{display:block; font-size:13px; height:24px; width:128px; line-height:26px; text-indent:5px; color:#6e6e6e; text-decoration:none;border:1px solid #ffffff;}  
#nav li ul.sub li a.fly  
{background:url(../images/system/bg_body_grad_both2.jpg) 50% -0% repeat-x;}  
#nav li:hover ul.sub li a:hover  
{background:#ffffff; color:#ff0031; border-color:#fff;}  
#nav li:hover ul.sub li a.fly:hover  
{background:#ffffff url(../images/arrow.gif) 120px 9px no-repeat; color:#000; border-color:#ffffff;}  
  
  
#nav li:hover li:hover ul,  
#nav li:hover li:hover li:hover ul,  
#nav li:hover li:hover li:hover li:hover ul,  
#nav li:hover li:hover li:hover li:hover li:hover ul  
{left:130px; top:-4px; background: url(../images/system/bg_body_grad_both2.jpg); padding:3px; border:1px solid #fff; white-space:nowrap; width:130px; z-index:400; height:auto;}  
  
#nav ul,  
#nav li:hover ul ul,  
#nav li:hover li:hover ul ul,  
#nav li:hover li:hover li:hover ul ul,  
#nav li:hover li:hover li:hover li:hover ul ul  
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}  
  
#nav li:hover li:hover a.fly,  
#nav li:hover li:hover li:hover a.fly,  
#nav li:hover li:hover li:hover li:hover a.fly,  
#nav li:hover li:hover li:hover li:hover li:hover a.fly  
{background:#ffffff url(arrow.gif) 120px 9px no-repeat; color:#000000; border-color:#fff;}  
  
#nav li:hover li:hover li a.fly,  
#nav li:hover li:hover li:hover li a.fly,  
#nav li:hover li:hover li:hover li:hover li a.fly  
{background:#ffffff url(arrow.gif) 120px 9px no-repeat; color:#000; border-color:#ffffff;}  
  
  

Hier der komplette HTML-Teil:

<ul id="nav">  
  
  <li class="top"><a href="TitelX.html" class="top_link"><span>TitelX</span></a></li>  
  
  <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">TitelX</span></a>  
    <ul class="sub">  
  
      <li><a href="TitelX.html">TitelX</a> </li>  
 <li><a href="TitelX.html">TitelX</a>  
  </li>  
      <li class="mid"><a href="TitelX.html">TitelX</a>  
      </li>  
  
  
      <li><a href="TitelX.html">TitelX</a></li>  
  
    </ul>  
  
  </li>  
  
  <li class="top"><a href="TitelX.html" id="services" class="top_link"><span>TitelX</span></a>  
  </li>  
  
  
  
  <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">TitelX</span></a>  
    <ul class="sub">  
  
<li><a href="TitelX.html">TitelX</a></li>  
</ul>  
  
  
  <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">TitelX</span></a>  
  <ul class="sub"><li class="mid"><a href="#nogo7" class="fly">TitelX</a>  
        <ul>  
  
          <li><a href="TitelX.html">TitelX</a></li>  
  
          <li><a href="TitelX.html">TitelX</a></li>  
           <li><a href="TitelX.html">TitelX</a></li>  
  
  
        </ul>  
  
      </li>  
  
      <li><a href="TitelX.html">TitelX</a></li>  
       <li><a href="TitelX.html">TitelX</a></li>  
              <li><a href="TitelX.html">TitelX</a></li>  
  
  
  
  
</ul>  
  
  
  
  <li class="top"><a href="TitelX.html" id="privacy" class="top_link"><span>TitelX</span></a></li>  
  <li class="top"><a href="TitelX.html" id="privacy" class="top_link"><span>TitelX</span></a></li>  
  
  <li class="top"><a href="http://www.TitelX.com" id="privacy" class="top_link"><span>TitelX</span></a></li>  
  
</ul>