Как сделать навигацию по всей странице

Question

Моя AIM: это сделать навигационную панель, проходящую по всему экрану, с сероватым цветом (# 839496). И пусть каждая ссылка/кнопка имеет границу слева и справа от нее. Так же, как панель навигации:

http://www.theberrics.com/dailyops

Однако

Моя проблема заключается в следующем:/кнопке ссылки будет только через насколько это идет. Я хочу, чтобы каждая кнопка пересекалась с шириной 150 пикселей (что прекрасно работает). НО также серая полоса продолжается по всему экрану горизонтально (что не работает и просто ничего не отображает).

Вот мой 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; 
}