如何使導航遍佈整個頁面

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％。寬度僅爲150px。

對不起，如果我的代碼或任何我說的是混亂。感謝您的閱讀！

Answer 1

更新你的CSS像下面的（即包括overflow: hidden;到nav

CSS

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