Web Pages Borders & Screen Resolution Problems

Question

When I change my screen resolution my web pages main navigation bottom border magically shrinks half of my web pages length instead of going with the flow of the the web page. How can I fix this problem? The CSS is below.

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

Here is the 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

It's nearly impossible to tell without a link to the webpage in question, but that:

 width: 50%;

looks suspicious in .beta. What is beta doing?