Css 网页边框及；屏幕分辨率问题

当我改变我的屏幕分辨率时，我的网页主导航下边框神奇地缩短了我网页长度的一半，而不是随着网页的流动。我如何解决这个问题？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>

如果没有相关网页的链接，几乎不可能知道，但是：

 width: 50%;

---

在测试版中看起来很可疑。beta版在做什么？

哇，要经历的事情太多了！至少让我们看看页面中有问题的部分的HTML。还有，所有的CSS真的适用吗？如果你清理你的帖子和代码，你会得到更好的答案。固定格式，至少现在更容易阅读。