title: How to expand LIs to full width of DIV
body: <p>this is my html code: </p>
  
  <pre><code>&lt;div id="menu"&gt;
   &lt;ul&gt;
    &lt;li&gt;Home&lt;/li&gt;
    &lt;li&gt;My blah&lt;/li&gt;
    &lt;li&gt;Lorem ipsum&lt;/li&gt;
    &lt;li&gt;Dolor amet&lt;/li&gt;
    &lt;li&gt;photogallery&lt;/li&gt;
   &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my CSS: </p>
  
  <pre><code>#menu li {
   display: inline;
   list-style-type: none;
  }
  </code></pre>
  
  <p><code>#menu</code> is in <code>#header-wrap</code> which is 800px wide. I want to expand text inside UL to be same size as #menu which is 800px. I can't do it with <code>margin-left</code> and <code>margin-right</code> because it leaves blank spaces or it move <code>li</code> on another line which I don't want. </p>
  
  <p>So is there any element that I can add into the CSS and it will expand text to 800px? </p>
  
  <p><img src="https://i.stack.imgur.com/YkKPz.png" alt="enter image description here"></p>
  
  <p>I can't use <code>word-spacing</code> because some things in <code>li</code>s has more than one word.</p>