Webseiten Borders & Bildschirm Auflösung Probleme

Question

Wenn ich meine Bildschirmauflösung ändern meine Webseiten Hauptnavigation unteren Rand magisch die Hälfte meiner Webseiten Länge schrumpft statt mit dem Fluss der Webseite gehen. Wie kann ich dieses Problem beheben? Das CSS ist unten. Hier

#main-nav { 
    width: 100%; 
    background: black; 
    font-weight: bold; 
    border-bottom: 5px solid blue; 
    float: right; 
    margin: 0px; 
    padding: 0px; 
} 

#main-nav ul { 
    width: 1024px; 
    margin: 0px auto; 
    text-align: right; 
    padding: 0px; 
    list-style-type: none; 
} 

#main-nav li{ 
    float: right; 
    margin-left: 1px; 
    padding: 0px; 
} 

#main-nav a { 
    text-align: center; 
    color: #fff; 
    text-decoration: none; 
    padding: 10px 15px; 
    background: blue; 
    float: left; 
} 

#main-nav a.active, #main-nav a:hover { 
    background-color: #467AFE; 
    color: #fff; 
} 

ist die HTML:

<div id="main-nav"> 
    <ul> 
     <li><a href="#" title="">Link</a></li> 
     <li><a href="#" title="">Link</a></li> 
     <li><a href="#" title="">Link</a></li> 
     <li><a href="#" title="">Link</a></li> 
     <li><a href="#" title="">Link</a></li> 
     <li><a href="#" title="" class="active">Link</a></li> 
    </ul> 
</div> 

Answer 1

Es ist fast unmöglich zu sagen, ohne einen Link auf der Webseite in Frage, aber das:

width: 50%; 

verdächtig aussieht in ß. Was macht Beta?