css - 网页边框和屏幕分辨率问题

Question

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

如果没有指向相关网页的链接，几乎不可能说出来，但是：

 width: 50%;

在 .beta 中看起来很可疑。贝塔在做什么？