如何使导航遍及整个页面

Question

我的目标是：使导航栏以灰色显示在整个屏幕上（＃839496）。 并让每个链接/按钮在其左侧和右侧都有一个边框。 就像导航栏位于：

http://www.theberrics.com/dailyops

然而，

我的问题是：链接/按钮仅在尽可能远的范围内。 我希望每个按钮的宽度都为150px（可以正常工作）。 但是，灰色条也会在整个屏幕上水平延伸（这是行不通的，什么也不显示）。

这是我的CSS：

nav {
    background-color: #839496;
    padding: 0.02px 0;
    margin-bottom: 10px;
}

nav ul {
    width: 100%; /*RIGHT HERE: i would like the whole unordered list to go across the screen. But it doesnt work*/
    position: relative;
    left:10%;
    margin: 0;
    padding-left: 100px;
}

nav li {
    float: left;

}

nav li a{
    display: block;
    width: 150px;
    background-color: #839496;
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px;
    border-right: 1px solid;
    border-left: 1px solid;
}

nav a:hover {
    background-color: white;
    color: #000;
    text-decoration: underline;
}

这是我的html：

    <nav>
        <ul>
            <li><a href="index.html">Home</a><li>
            <li><a href="Top10.html">Top 10</a></li>
            <li><a href="Skaters.html">Skaters</a></li>
            <li><a href="Submit.html">Submit</a></li>
        </ul>   
    </nav>

另外：我不希望每个按钮都是页面的25％。 宽度仅为150像素。

对不起，如果我的代码或我所说的任何内容令人困惑。 感谢您的阅读！

Answer 1

像下面那样更新您的CSS（即，包括overflow: hidden; nav

的CSS

nav {
    background-color: #839496;
    margin-bottom: 10px;
    overflow: hidden;
    padding: 0.02px 0;
}