title: How to make my navigation bar fill up entire width of my div
body: <h2>The issue has now been fixed! Thanks to @seva.rubbo ! Here's the updated code in <a href="http://jsfiddle.net/24rurob3/1/" rel="nofollow">JSFiddle</a></h2>
  
  <p>I have created a layout which contains 1 div with a fixed width <code>width: 900px;</code>. 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;</p>
  
  <pre><code>    &lt;div id="content"&gt;
          &lt;nav&gt;
              &lt;ul class="nav"&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Categories&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;News&lt;/a&gt;&lt;/li&gt;               
                   &lt;li&gt;&lt;a href="#"&gt;Members&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;Media&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The CSS for Navigation;</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>The Div CSS;</p>
  
  <pre><code>div#content {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
  background-color: #fff;
  height: 1200px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/24rurob3/" rel="nofollow">JSFiddle Link</a></p>
  
  <p>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.</p>