title: Removing default styling from HTML list elements
body: <p>So I have some code that looks like:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;
      &lt;ul&gt;
        &lt;li&gt; ... &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This has indented itself. I have no styling to indent this. According to the computed styling there is no margin-left, yet everything is actually indented, I guess this is the default behaviour of nested ul elements?</p>
  
  <p>Regardless, on every nested ul, I have a class that is called <code>comment-children</code> I need to say only 5 down can indent (so <code>.comment-children .comment-children .comment-children .comment-children .comment-children</code> done, great) but at a width of 640px, all nesting must be turned off.</p>
  
  <p>The part I am having the trouble with is that the <code>ul</code> elements are nested by default <a href="http://jsfiddle.net/d7az0jv3/" rel="nofollow">http://jsfiddle.net/d7az0jv3/</a></p>
  
  <p><strong>What do you want to do</strong></p>
  
  <ul>
  <li>Remove all default nesting and let me nest it my self via the class <code>comment-children</code></li>
  <li>At 640px remove all nesting.</li>
  </ul>