title: How to correctly apply a css rule to a nested element
body: <p>I'm starting in CSS now, and I still get confused with the box model, with nested elements, which would be the right thing to apply an alignment to the left of the list, using directly the li element or the ul element</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ul {
    background-color: red;
    /*margin-left: -28px*/
  }
  
  li {
    margin-left: -28px;
    background-color: green;
  }
  
  ul + ul {
    background-color: red;
    margin-left: -28px;
  }
  
  ul + ul li {
    margin-left: initial;
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;apple&lt;/li&gt;
    &lt;li&gt;banana&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
    &lt;li&gt;apple&lt;/li&gt;
    &lt;li&gt;banana&lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What is the difference if I apply a property to ul or li?</p>