How to make my navigation bar fill up entire width of my div

Question

The issue has now been fixed! Thanks to @seva.rubbo ! Here's the updated code in JSFiddle

I have created a layout which contains 1 div with a fixed width width: 900px; . and I have centered this div so in that I have 2 blank spaces on either side. What I want to do is add a navigation bar inside this div at the top and have its width fill up the width of the div. Here's my navigation html and css code;

    <div id="content">
        <nav>
            <ul class="nav">
                 <li><a href="#">Home</a></li>
                 <li><a href="#">Categories</a></li>
                 <li><a href="#">News</a></li>               
                 <li><a href="#">Members</a></li>
                 <li><a href="#">Media</a></li>
            </ul>
        </nav>
    </div>

The CSS for Navigation;

.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
padding:0;
text-align:center;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:20px;
background-color: #AEAEAE;
width: 15%;
text-decoration: none;
text-transform: uppercase;
}
.nav a:hover {
background-color: #fff;
}

The Div CSS;

div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: 1200px;
}

JSFiddle Link

All help would be greatly appreciated. I hope I've explained my problem well enough, I would post images but I have not got enough reputation. Thank you.

Answer 1

.nav li{
    float: left;
    width: 20%;
}

And remove width: 15% from .nav a