如何使導航遍及整個頁面

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