A big shoutout to @seva.rubbo for fixing the issue! Check out the updated code on JSFiddle
I recently designed a layout with a fixed width div of width: 900px;. I centered this div, leaving blank spaces on either side. Now, I'm looking to add a navigation bar inside this div at the top with the width spanning the entire div. Below is the HTML and CSS for my navigation:
<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 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;
}
Div CSS:
div#content {
width: 900px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
height: 1200px;
}
Your assistance is greatly appreciated. I tried my best to explain the problem without images due to reputation constraints. Thank you!