title: How to make an inline <ul> stretch full width of container
body: <p>My HTML</p>
  
  <pre><code>&lt;div id="main_navigation"&gt;
      &lt;ul&gt;&lt;li&gt;&lt;a href="/One"&gt;One&lt;/li&gt;&lt;/a&gt;&lt;li&gt;&lt;a href="/Two"&gt;Two&lt;/li&gt;&lt;/a&gt;&lt;li&gt;&lt;a href="/three"&gt;Three&lt;/li&gt;&lt;/a&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS</p>
  
  <pre><code>#main_navigation ul {
  margin: 10px 0 15px 0;
  padding: 0;
  list-style-type: none;
  text-align: center;
  }
  
  #main_navigation ul li {
  display: inline;
  font-size:24px;
  }
  
  #main_navigation ul li a {
  text-decoration: none;
  padding: .2em 1em;
  color: #cbc19e;
  background-color: #322918;
  }
  
  #main_navigation ul li a:hover {
  color: #322918;
  background-color: #cbc19e;
  }
  </code></pre>
  
  <p>This looks perfect EXCEPT it does not quite stretch out to the full width of the rest of the objects on the page.  The container has:</p>
  
  <pre><code>margin:0 50px 0 50px;
  </code></pre>
  
  <p>as do all of the other containers on the page.   The only one that does not stretch the full width is the nav bar.  I would not like to use tables or jscript if possible.  Suggestions?</p>