title: Why padding-left does not work in my simple case?
body: <p>I have a very simple layout, just two un-ordered list by using <code>&lt;ul&gt;&lt;li&gt;</code>, with each of them inside a <code>&lt;div&gt;</code> .</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="main"&gt;
      &lt;div id="fist-list"&gt;
          &lt;ul id="colors"&gt;
              &lt;li id="white"&gt;White&lt;/li&gt;
              &lt;li id="green"&gt;Green&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="second-list"&gt;
          &lt;ul id="numbers"&gt;
              &lt;li id="one"&gt;One&lt;/li&gt;
              &lt;li id="two"&gt;Two&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>li{
    float: left;
    width: 30px;
  }
  #second-list{
    padding-left:30px;
  }</code></pre>
  
  <p><a href="http://jsfiddle.net/a8dy6/9/" rel="nofollow">you can check my simple code here</a> .</p>
  
  <p>I tried to use CSS <code>padding-left</code> to <strong>seperate</strong> the two list 30px away from each other, but my CSS does not work, why?</p>