title: CSS center ul list inside a 100% width div
body: <p>I feel as if I have tried everything from <code>text-align center</code> to <code>margin:0 auto</code> with a position relative and width of 100%, but they didn't work, I am trying to center my UL inside the div...</p>
  
  <p>Here is my code</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  .header {
    height: 40px;
    background: #000;
    width: 100%;
  }
  
  .header ul {
    list-style-type: none;
  }
  
  .header li {
    float: left;
    line-height: 40px;
  }
  
  .header li a {
    color: #FFF;
    padding: 0 18px;
    height: 40px;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <pre><code>&lt;div class="header"&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;Gallery&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Rates&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Reviews&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>