title: When i scroll down, the info in my <li> element appears on top of my navbar. Can some help me with it
body: <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>*{
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  }
  
  ::selection{
      background-color: #333;
      color: rgb(255, 230, 0);
  }
  
  ::-moz-selection{
      background-color: #333;
      color: rgb(255, 255, 255);
  }
  
  
  ::-webkit-scrollbar{
      width: 10px;
  }
  
  ::-webkit-scrollbar-thumb{
      background-color: rgb(255, 198, 198);
      -webkit-border-radius: 10px;
  }
  
  ::-webkit-scrollbar-track{
      background-color: #f8f8f8;
  }
  
  header{
      width: 100%;
      z-index: 100;
  }
  
  
  
  .nav-list, #left-navbar, #right-navbar{
      display: flex;
  }
  
  .img-logo{
      width: 200px;
      transform: translateX(-20px);
  
  }
  
  #right-navbar{
      transform: translateX(300px);
  }
  
  .nav-list{
      position: fixed;
      width: 1152px;
      top: 0;
      left: 110px;
      background-color: rgb(255, 255, 255);
      list-style-type: none;
      padding: 20px;
      box-shadow: 0px 0px 9.5px 0px black;
  }
  
  .n{
      text-decoration: none;
      color: black;
      font-size: 14px;
      font-weight: 700;
  }
  
  .nav-link{
      text-decoration: none;
      padding: 10px;
      color: black;
      font-size: 14px;
      font-weight: 700;
  }
  
  .nav-link:hover{
      border-bottom: 4px solid rgb(255, 0, 0);
      transition: all ease-out .5s;
  }
  
  .n:hover{
      border-bottom: 4px solid rgb(255, 0, 0);
      transition: all ease-out .5s;
  }
  
  #free-web-hosting{
      background-color: #f8f8f8;
      height: 100vh;
      padding: 230px 100px;
      overflow-y: hidden;
      background-image: url(https://images2.imgbox.com/d7/c9/XyznzmUz_o.png);
      background-repeat: no-repeat;
      background-position-x: 600px;
      background-position-y: 170px;
  }
  
  
  button{
      background-color: #ff5d64;
      border-radius: 5px;
      box-shadow: .5px .5px 20px .5px rgb(212, 209, 209);
      border: none;
      padding: 12px; 
  }
  
  .fwh-img{
       transform: translate(470px, -250px);
       z-index: 1;
  }
  
  .fas, .nav-link{
      position: relative;
      top: 19px;
  }
  
  .bg-red{
      border: none;
      border-radius: 5px;
      background-color: red;
      color: white;
      margin: 0px 40px;
      padding: 10px 25px;
      box-shadow: 0px 0px 10px 0px rgb(255, 140, 140);
  }
  
  #sponsors{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .sponsors-img{
      padding: 10px 40px;
      margin-top: 30px;
  }
  
  #all-starts{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 60px 0px;
  }
  
  #pricing-container{
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .pricing{
      width: 280px;
      height: 100vh;
  
      box-shadow: 0px 0xp 10px 0px;
      border: 1px solid black;
  }`enter code here`
  
  .pricing1, .see-more{
      display: flex;
      flex-direction: column;
  }
  
  @media  (max-width: 768px) {
      #free-web-hosting{
          background-image: none;
          text-align: center;
          line-break: loose;
      }
  
      #sponsors{
          display: flex;
          flex-wrap: wrap;
      }
  
  
      
      #pricing-container{
          display: flex;
          flex-wrap: wrap;
      }
  
      #all-starts{
          text-align: center;
          display: flex;
          flex-wrap: wrap;
      }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
      &lt;link rel="shortcut icon" href="https://images2.imgbox.com/a5/2f/URZJk3ro_o.png" type="image/x-icon"&gt;
      &lt;script src="https://kit.fontawesome.com/fa9f85711d.js" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="000web.css"&gt;
      &lt;title&gt;Free Web Hosting - Host a Website for Free with Cpanel, PHP&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav id="nav-bar"&gt;
              &lt;ul class="nav-list"&gt;
                  &lt;div id="left-navbar"&gt;
                    &lt;img class="img-logo" src="https://svgshare.com/i/YPv.svg" alt="logo"&gt;
                    &lt;li&gt;&lt;a class="n" href="#"&gt;&lt;span class="nn" style="color: rgb(255, 20, 20); font-size: 14px; font-weight: 900; border: none;"&gt;SALE&lt;/span&gt;&lt;br&gt;Cheap Web Hosting&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="nav-link" href="#"&gt;Website Builder&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a class="nav-link" href="#"&gt;Forum&lt;/a&gt;&lt;/li&gt;
                 &lt;/div&gt;
                  &lt;div id="right-navbar"&gt;
                      &lt;span class="fas fa-globe"&gt;&lt;/span&gt;
                      &lt;li&gt;&lt;a style="color: rgb(255, 25, 25); border: none;" class="nav-link" href="#"&gt;SIGN IN&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="nav-link bg-red" href="#"&gt;GO PREMIUM&lt;/a&gt;&lt;/li&gt;
                  &lt;/div&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
      &lt;main&gt;
          &lt;div id="free-web-hosting"&gt;
              &lt;div id="con"&gt;
              &lt;h3 class="h33" style="font-size: 45px; color: #2b464c; font-weight: 700;"&gt;Free Web Hosting&lt;/h3&gt;
              &lt;p style="margin: 30px 0px; line-height: 25px;"&gt;&lt;span style="color: rgb(253, 67, 67);"&gt;Zero&lt;/span&gt;  cost website hosting with PHP,&lt;br&gt; MySQL, cPanel &amp; no ads!&lt;/p&gt;
              &lt;button style="color: rgb(255, 255, 255);"&gt;GET STARTED&lt;/button&gt;&lt;br&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="sponsors"&gt;
              &lt;img class="sponsors-img" src="https://svgshare.com/i/YQe.svg" alt="php logo"&gt;
              &lt;img class="sponsors-img" src="https://svgshare.com/i/YQp.svg" alt="cloudflare logo"&gt;
              &lt;img class="sponsors-img" src="https://svgshare.com/i/YR0.svg" alt="nginx logo"&gt;
              &lt;img class="sponsors-img" src="https://svgshare.com/i/YNt.svg" alt="cloudlinux logo"&gt;
              &lt;img class="sponsors-img" src="https://svgshare.com/i/YNu.svg" alt="intel logo"&gt;
              &lt;img class="sponsors-img" src="https://svgshare.com/i/YR1.svg" alt="wordpress logo"&gt;
              &lt;img class="sponsors-img" src="https://svgshare.com/i/YNM.svg" alt="mysql logo"&gt;
          &lt;/div&gt;
  
          &lt;div id="all-starts"&gt;
              &lt;h1&gt;It All Starts Here&lt;/h1&gt;
              &lt;p&gt;Choose one of the premium plans and enjoy all the greatest features, industry leading performance and top of&lt;br&gt;the class 24/7 live support on the market. Unlimited hardware resources, free domain, SSL &amp; SSH also included!&lt;/p&gt;
          &lt;/div&gt;
  
          &lt;div id="pricing-container"&gt;
              &lt;div class="pricing pricing1"&gt;
                  &lt;h4&gt;$000/mo&lt;/h4&gt;
                      &lt;li class="fas fa-check"&gt;1 Website&lt;/li&gt;
                      &lt;li class="fas fa-check"&gt;300 MB Disk Space&lt;/li&gt;
                      &lt;li class="fas fa-check"&gt;Limited Bandwidth (3 GB)&lt;/li&gt;
                      &lt;li class="fas fas fa-times"&gt;No Email Account&lt;/li&gt;
                      &lt;li class="fas fas fa-times"&gt;24/7/365&lt;/li&gt;&lt;br&gt;
                  &lt;div class="see-more"&gt;
                      &lt;span&gt;See all features&lt;/span&gt;
                      &lt;li&gt;FREE SIGN UP&lt;/li&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="pricing"&gt;&lt;/div&gt;
              &lt;div class="pricing"&gt;&lt;/div&gt;
              &lt;div class="pricing"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/main&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I completed responsive web design last 3 weeks on <strong>freecodecamp</strong>, and I have been building pages looking at other websites to improve my portfolio, but this web page I'm building is very difficult, can you please into the code and tell me where I went wrong. I thought that I was overusing the <code>&lt;li&gt;</code> that is why it is behaving this wa</p>
  <p>y.
  See here
  <a href="https://i.stack.imgur.com/2Z7mV.png" rel="nofollow noreferrer">enter image description here</a></p>