title: How to create HTML/CSS menu 100% width where text goes to the edges?
body: <p>I have searched long and hard for this one and can't seem to find a solution. </p>
  
  <p>I have a client who wants the menu text to use 100% of the width of the menu and have each menu item spaced out evenly. In other words, the left-most menu item should sit flush with the left side of the <code>&lt;nav&gt;</code> and the right-most menu item should sit flush with the right side of the <code>&lt;nav&gt;</code>. </p>
  
  <p>I would normally set the <code>&lt;li&gt;</code> to <code>text-align:center;</code>, but that leaves space on the left side and the right side. Is there a way to accomplish this with just CSS and HTML? In my version, the left side is fine, but there is space on the right. Here is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Media&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Tour&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;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>nav ul{
  display: table;
  table-layout: fixed;
  width: 100%;
  padding: 0;
  100px;
  }
  nav ul li {
  list-style-type: none;
  display: table-cell;
  background: gray;
  }
  nav ul li a {
  display:block;
  }
  </code></pre>
  
  <p>And a fiddle with the exact same thing: <a href="http://jsfiddle.net/zx4de/1/" rel="nofollow">http://jsfiddle.net/zx4de/1/</a> </p>
  
  <p>Any help would be much appreciated. Thanks!</p>