Pages Web Frontières et problèmes de résolution d'écran

Question

Lorsque je change la résolution de l'écran, la bordure inférieure de la navigation principale de mes pages Web réduit la longueur de la moitié de mes pages Web au lieu de suivre le flux de la page Web. Comment puis-je résoudre ce problème? Le CSS est ci-dessous.

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

Voici le code 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

Il est presque impossible de dire sans lien vers la page en question, mais que:

width: 50%; 

semble suspect dans .beta. Que fait la beta?