Webページの境界線と画面解像度の問題

Question

私の画面解像度を変更すると、Webページのメインナビゲーションの下部境界線が、Webページのフローに行くのではなく、Webページの長さの半分を魔法のように縮小します。この問題を解決するにはどうすればよいですか？ CSSは以下の通りです。ここで

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

は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

それは、問題のWebページへのリンクせずに伝えることはほぼ不可能ですが、その：

width: 50%; 

は、βで疑わしいです。ベータは何をしていますか？