title: Nested list not working
body: <p>This is my code. The prob is that the list is not nesting properly. I added a padding-left, but the number in left margin doesn't go away.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#li {
    padding-left: 20px !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;My grocery store&lt;/h3&gt;
  &lt;hr&gt;&lt;/hr&gt;
  &lt;p&gt;Following items are available at my store:&lt;/p&gt;
  &lt;ol&gt;
    &lt;li&gt;Sugar&lt;/li&gt;
    &lt;li&gt;Chocolates :
      &lt;li id="li"&gt;Toblerone&lt;/li&gt;
      &lt;li id="li"&gt;Nestle&lt;/li&gt;
    &lt;/li&gt;
    &lt;li&gt;Rice&lt;/li&gt;
    &lt;li&gt;Other food items..&lt;/li&gt;
  &lt;/ol&gt;
  &lt;img src="C:/Users/James007/Desktop/shop.JPEG"&gt;&lt;/img&gt;</code></pre>
  </div>
  </div>
  </p>