title: How to align list items
body: <p>I am giving a trial on how to style lists and using child selectors.
  Currently I managed to style an unordered list as my jsfiddle displays:<a href="https://jsfiddle.net/Wosley_Alarico/mc5w2wqL/1/" rel="nofollow noreferrer">https://jsfiddle.net/Wosley_Alarico/mc5w2wqL/1/</a>.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;List item 1&lt;/li&gt;
    &lt;li&gt;List item 1&lt;/li&gt;
    &lt;li&gt;List item 1&lt;/li&gt;
    &lt;li&gt;List item 1&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>ul li:not(:first-child){
    color: red;
  }
  ul li:first-child{
    line-height: 50px;
    list-style: none;
  }
  </code></pre>
  
  <p>At the moment the bullet disappeared, but the list did not move to the far left replacing the position of the bullet.
  How can I align the first list item to the bullets of the other list items?</p>