how to make the navigation go across the whole page

Question

My AIM: is to make a navigation bar go across the whole screen, with a greyish colour (#839496). And have each link/button to have a border to the left and the right of it. Just like the navigation bar on:

http://www.theberrics.com/dailyops

However,

My Problem is: the link/button is only going across as far as is goes. I want each button to go across with the width of 150px (which works fine). BUT also have the grey bar continue through the whole screen horizontally (which isnt working and just displays nothing).

Here is my 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;
}

And here is my 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: i dont want each button to be 25% of the page. Just 150px wide.

Sorry if my code or anything i said is confusing. Thank you for reading!

Answer 1

update your css like the below (ie include overflow: hidden; to nav

CSS

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