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

[Marvin]

Hallo ihr,

bin völlig verzweifelt.
Diese Navigationsleiste macht mich fertig. Sie wird zentriert angezeigt!
Aber sobald ich mehr Menüpunkte hinzufüge, erscheint ein horizontaler Scrollbalken und der Bildschirmbereich wird nach rechts immer größer. Sozusagen kommt dann rechts leerer Platz hinzu, die Navigation bleibt aber genau da, wo sie sein soll.
Was kann ich also machen, um den Bildschirmbereich nicht mehr nach rechts größer werden zu lassen? Ich habe wirklich vieles versucht, bin aber mit meinem Latein am Ende.

Danke für eure Hilfe!!

Marvin

Der entsprechende Ausschnitt vom CSS-Code:

#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;}

Der entsprechende Ausschnitt vom HTML-Code:

<ul id="nav">  
  
  <li class="top"><a href="index.html" class="top_link"><span>Home</span></a></li>  
  
  <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">&Uuml;ber  
mich</span></a>  
    <ul class="sub">  
  
      <li><a href="life.html">Lebenslauf</a> </li>  
 <li><a href="philosophy.html">Philosophie</a></li>  
      <li class="mid"><a href="publications.html">Ver&ouml;ffentlichungen</a> </li>  
  
      <li><a href="friends.html">Freunde</a></li>  
  
    </ul>  
  
  </li>  
  
  
</ul>