html - how to make the navigation go across the whole page -

html - how to make the navigation go across the whole page -

my aim: create navigation bar go across whole screen, greyish colour (#839496). , have each link/button have border left , right of it. navigation bar on:

http://www.theberrics.com/dailyops

however,

my problem is: link/button going across far goes. want each button go across width of 150px (which works fine). have gray bar go on through whole screen horizontally (which isnt working , displays nothing).

here css:

nav { background-color: #839496; padding: 0.02px 0; margin-bottom: 10px; } nav ul { width: 100%; /*right here: whole unordered list go across screen. 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; }

and here 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>

also: dont want each button 25% of page. 150px wide.

sorry if code or said confusing. give thanks reading!

update css below (i.e. include overflow: hidden; nav

css

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

html css navigation navigationbar