title: How to stretch content horizontally inside a div so that it occupy evenly all the space?
body: <p>Here's some HTML.</p>
  
  <pre><code>&lt;div id = "header"&gt;
    &lt;div id = "menu"&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;Browse&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href = "#"&gt;Account&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href = "#"&gt;About&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
     
  
  <p>And, here's some CSS</p>
  
  <pre><code>#menu
  {
    width: 80%;
    height: 30px;
  }
  
  #menu li a
  {
   display: block;
   background-color: #999999;
   color: #FFFFFF;
   font-weight: bold;
   line-height: 30px; 
   text-align: center;   
  }
  </code></pre>
  
  <p>The above HTML and CSS give 4 rectangles. I'd like to have those rectangles to be evenly stretched horizontaly inside the the <strong>menu div</strong>. </p>
  
  <p>Each time I try, I either get free space after <strong>About rectangle</strong> (i.e. the last rectangle) or get the About box flow to the next line.</p>
  
  <p>Thanks for helping</p>