title: My span tag inside li tag is not getting aligned properly even though height of span and li tag is same
body: <p>you  can see from the images that there is nothing conflicting to put the icon at that position. it should be naturally be aligned with li tag since both li and span tag height is same. 
  I tried other people who did the same project from a udemy course. I copy pasted their css file in my css. guess what it appears the same way.</p>
  
  <p>This is a todo list I am working on. I am a beginner.</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>body {
      background: #03001e;  /* fallback for old browsers */
      background: -webkit-linear-gradient(to bottom, #fdeff9, #ec38bc, #7303c0, #03001e);  /* Chrome 10-25, Safari 5.1-6 */
      background: linear-gradient(to bottom, #fdeff9, #ec38bc, #7303c0, #03001e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      
  }
  h1 {
      background: #2980b9;
      color:white;
      margin:0;
      text-transform: uppercase;
      padding: 10px 20px;
     font-size: 24px;
      font-weight:normal;
  }
  .fa-pencil-alt
  {
      float:right;
  }
  
  ul {
      list-style:none;
      margin:0;
      padding:0;
  }
  #container {
       border: solid 2px gray;
       width:380px; 
       margin: 100px auto;
       background:#f7f7f7;
       box-shadow: 0 0 3px rgba(0,0,0,0.1);
  }
  .completed {
      color:gray;
      text-decoration: line-through;
  }
  
  body {font-family:Roboto;}
  li{
  
      background:white;
      height:40px;
      line-height: 40px;
      color:#666;
  }
  li:nth-child(2n)
  {
      background:#f7f7f7;
  }
  input {
      font-size:18px;
      background-color: #f7f7f7;
      width:100%;
      padding: 13px 13px 13px 20px;
      box-sizing: border-box;
      color:#2980b9;
      border: 3px solid rgba(0,0,0,0);
  }
  input:focus {
      background: #fff;
      border: 3px solid  #2980b9;
      outline: none;
  }
  
  span {
      background:#e74c3c;
      height: 40px;
      margin-right:20px;
      text-align: center;
      color:white;
     width:40px; 
      display: inline-block;
      transition:0.2s linear; 
      opacity:1.0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>```
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script type="text/javascript"
      src="https://code.jquery.com/jquery-2.1.4.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/1.css"&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&amp;display=swap" rel="stylesheet"&gt;
      &lt;script src="https://kit.fontawesome.com/8706ae3761.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      
  &lt;div id="container"&gt;
      &lt;h1&gt;Todo List &lt;i class="fas fa-pencil-alt"&gt;&lt;/i&gt;&lt;/h1&gt;
      &lt;input type="text" placeholder="Add New Todos"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;span&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt;  &lt;/span&gt; Homework&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt;  &lt;/span&gt; Exercise&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt;  &lt;/span&gt; Gaming&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;&lt;i class="fas fa-trash"&gt;&lt;/i&gt;  &lt;/span&gt; Dinner&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script src="sandbox.js"&gt;&lt;/script&gt;    
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/siKVm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/siKVm.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/FjTkk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FjTkk.png" alt="enter image description here"></a></p>