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

Question

当我更改屏幕分辨率时，我的网页主导航底部边框会神奇地缩小网页长度的一半，而不是随着网页的流动而变化。我该如何解决这个问题？

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

<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 中看起来很可疑。贝塔在做什么？