如何让我的导航栏填满我的div的整个宽度

Question

现在问题已解决！感谢@ seva.rubbo！这是JSFiddle

中的更新代码

我创建了一个包含1个div且具有固定宽度width: 900px;的布局。我把这个div集中在一起，因为我在两边都有2个空格。我想要做的是在顶部的div中添加一个导航栏，并使其宽度填充div的宽度。这是我的导航html和css代码;

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

导航CSS;

.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;
}

Div CSS;

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

JSFiddle Link

非常感谢所有帮助。我希望我已经很好地解释了我的问题，我会张贴图片，但我没有足够的声誉。谢谢。

Answer 1

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

从width: 15%

中删除.nav a