title: Nav that fills up width of page in responsive design
body: <p>I have designed a responsive layout that you can see here: <a href="http://pixelcakecreative.com/cimlife/responsive/" rel="nofollow noreferrer">http://pixelcakecreative.com/cimlife/responsive/</a></p>
  
  <p>When viewed on a display that is less that 1550px wide, there is a small problem. I want that nav bar to fill up the entire width of the <code>&lt;nav&gt;</code> element. </p>
  
  <p>My HTML is set up like this:</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;About&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contests&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Store&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>In my css, I have given each <code>&lt;a&gt;</code> some padding. The padding is the variable that should change based on the page width, so using px will not work. I cant use percentages because each <code>&lt;li&gt;</code> has a different width (different amount of text). Is there a good solution (jquery or css) to spread out the navbar across the entire width of the <code>&lt;nav&gt;</code>?</p>
  
  <p>The attached picture is the desired effect<img src="https://i.stack.imgur.com/c2BFj.png" alt="enter image description here"></p>