title: CSS code problem that shows the navigation bar incorrectly
body: <p>There is something wrong with my CSS code,  once I added the CSS code of the products (starting from #lap) the navigation bar showed incorrectly, and when I remove the &quot;}&quot; that close &quot;@keyframe slide&quot; the navigation bar shows correctly but ofc the products CSS code doesn't render cuz &quot;@keyframe slide&quot; remains unclosed.</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 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#006CDA;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 18px 14px;
    text-decoration: none;
    transition-duration: 0.5s;
  }
  li a:hover {
       background-color: #0566C9;
       transform: scale(1.1);
       margin-left: 15px;
  }
  
  input{
      width: 700px;
      height: 40px;
      background-color: #F4F3EC    ;
      border: none;
      margin-top: 7px;
      outline: none;
  }
  select{
      width: 140px;
      height: 40px;
      background-color: #F4F3EC;
      border-bottom-left-radius: 7px;
      border-top-left-radius: 7px;
      color: #0335AA;
        background-color: #D9D8D4;
        border: none;
        font-size: 14px;
        margin-top: 7px;
        outline: none;
        cursor: pointer;
  }
  select:hover{
      background-color: #C1C1C1;
  }
  button{
      width: 60px;
      height: 40px;
      color: #0335AA;
      background-color: #D9D8D4;
      border: none;
      border-bottom-right-radius: 7px;
      border-top-right-radius: 7px;
      margin-top: 7px;
      outline: none;
      cursor: pointer;
  }
  button:hover{
      background-color: #C1C1C1;
  }
  .slider{
      width:1500px;
      height:500px;
      background: url(dvc.jpeg);
      margin:70px auto;
      background-repeat: no-repeat;
      border-radius: 9px;
      animation-name: slide ;
      animation-duration: 20s;
      animation-iteration-count: infinite;    
  }
  
  @keyframes slide{
  25%{
      background: url(dvc.jpeg);
  
  
  }
  50%{
      background: url(hoap.jpg);
  
  }
  75%{
      background: url(outfit.jpg);
  
  }
  100%{
      background: url(vdg.jpg);
  }
  } 
  #lap{
      width: 300px;
      height: 380px;
      background-color: white;
      border-radius: 9px;
      margin-top:  -40px;
      margin-left: 120px;
      padding-top: 15px;
      transition-duration: 1s;
      }
  #lap:hover{
      transform: scale(1.08);
      }
  #tv{
      width: 300px;
      height: 380px;
      background-color: white;
      border-radius: 9px;
      margin-top: -395px;
      margin-left: 440px;
      padding-top: 15px;
      transition-duration: 1s;
      }
  #tv:hover{
      transform: scale(1.08);
      }
  #ps{
      width: 300px;
      height: 380px;
      background-color: white;
      border-radius: 9px;
      margin-top: -395px;
      margin-left: 760px;
      padding-top: 15px;
      transition-duration: 1s;
      }
  #ps:hover{
      transform: scale(1.08);
                  }
  #gp{
      width: 300px;
      height: 380px;
      background-color: white;
      border-radius: 9px;
      margin-top: -395px;
      margin-left: 1080px;
      padding-top: 15px;
      transition-duration: 1s;
      }
  #gp:hover{
      transform: scale(1.08);
      }
  #gm{
      width: 300px;
      height: 380px;
      background-color: white;
      border-radius: 9px;
      margin-top: 40px;
      margin-bottom: 20px;
      margin-left: 1080px;
      padding-top: 15px;
      transition-duration: 1s;
      }
  #gm:hover{
      transform: scale(1.08);
      }
  #tn{
      width: 300px;
      height: 380px;
      background-color: white;
      border-radius: 9px;
      margin-top: -415px;
      margin-bottom: -405px;
      margin-left: 760px;
      padding-top: 15px;
      transition-duration: 1s;
      }
  #tn:hover{
      transform: scale(1.08);
      }
  #pt{
      width: 300px;
      height: 380px;
      background-color: white;
      border-radius: 9px;
      margin-top: 10px;
      margin-bottom: -420px;
      margin-left: 440px;
      padding-top: 15px;
      transition-duration: 1s;
      }
  #pt:hover{
      transform: scale(1.08);
      }
  #snk{
      width: 300px;
      height: 380px;
      background-color: white;
      border-radius: 9px;
      margin-top: 25px;
      margin-left: 120px;
      padding-top: 15px;
      transition-duration: 1s;
      }
  #snk:hover{
      transform: scale(1.08);
      }
  i{
      font-family:verdana;
      color: #3153BF;
      font-size: 19px;
      margin-left: 15px;
                  }
  img{
      width: 270px;
      margin-left: 15px;
                  }
  .prd{
      text-decoration:none;
      font-family:verdana;
      color: #3153BF;
                  }
  p{
      margin-left: 15px;
                  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;title&gt;Home&lt;/title&gt;
              &lt;meta charset="utf-8"&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
              &lt;link rel="stylesheet" type="text/css" href="home.css"&gt;
              &lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"&gt;
          &lt;/head&gt;
  
          &lt;body style="background-color:#E5E5E2;"&gt;
  &lt;!--navigation bar--&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="file:///C:/Users/Gh0st/Desktop/project.main/home.html"&gt;&lt;i class="fas fa-home" style="font-size:20px;font-"&gt;&amp;ensp;home&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="file:///C:/Users/Gh0st/Desktop/project.main/login.html"&gt;&lt;i class="fas fa-user" style="font-size:20px;"&gt;&amp;ensp;login&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          
          &lt;li&gt;
              &amp;ensp;&amp;ensp;&lt;select&gt;
                  &lt;option&gt;all categories&lt;/option&gt;
                  &lt;option&gt;electronic devices&lt;/option&gt;
                  &lt;option&gt; video games&lt;/option&gt;
                  &lt;option&gt;sports equipment&lt;/option&gt;
                  &lt;option&gt;home appliances&lt;/option&gt;
                  &lt;option&gt;outfits&lt;/option&gt;
              &lt;/select&gt;
          &lt;/li&gt;
  
          &lt;li&gt;&lt;form&gt;
              &lt;label for name="search"&gt;&lt;/label&gt;
              &lt;input class="sch" type="search" name="search" placeholder="&amp;ensp;search..."&gt;
          &lt;/form&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;button&gt;&lt;i class="fas fa-search" style="font-size:18px;"&gt;&lt;/i&gt;&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="file:///C:/Users/Gh0st/Desktop/project.main/shipping.html"&gt;&amp;ensp;&amp;ensp;&lt;i class="fas fa-plane" style="font-size:20px;"&gt;&amp;ensp;&amp;ensp;shipping&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt;&lt;a href="file:///C:/Users/Gh0st/Desktop/project.main/cart.html"&gt;&amp;ensp;&lt;i class="fas fa-shopping-cart" style="font-size:20px;"&gt;&amp;ensp;cart&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="file:///C:/Users/Gh0st/Desktop/project.main/help.html?file=&amp;submit=Submit"&gt;&amp;ensp;&amp;ensp;&lt;i class="fas fa-question-circle" style="font-size:20px;"&gt;&amp;ensp;help&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;!--slider show--&gt;
  
      &lt;div class="slider"&gt;&lt;/div&gt;
  
  &lt;!--products--&gt;
  
              &lt;div  id="lap"&gt;
                  &lt;i class="fas fa-list"&gt; Electronic devices&lt;/i&gt;
  &lt;a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product1.html" &gt;
      &lt;img src="lap.jpg" alt="laptop"&gt;&lt;/img&gt;
      &lt;p style="text-align:left;"&gt;HP laptop 15s-fq2xxx&lt;br&gt;&lt;br&gt;&lt;strong&gt;799&amp;euro;&lt;/strong&gt;&lt;/p&gt;
  &lt;/a&gt;
  &lt;/div&gt;
                  
              &lt;div id="tv"&gt;
                  &lt;i class="fas fa-list"&gt; Home applience&lt;/i&gt;
  &lt;a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product2.html"&gt;
      &lt;img src="tv.jpg" alt="tv" &gt;&lt;/img&gt;
      &lt;p&gt;Samsung QE55QN85AATXXU 55" &lt;br&gt;&lt;br&gt;&lt;strong&gt;1000&amp;euro;&lt;/strong&gt;&lt;/p&gt;
  &lt;/a&gt;
  &lt;/div&gt;
              &lt;div id="ps"&gt;
                  &lt;i class="fas fa-list"&gt; Video games&lt;/i&gt;
  &lt;a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product3.html" &gt;
      &lt;img src="ps5.jpg" alt="ps5"&gt;&lt;/img&gt;
      &lt;p&gt;PlayStation 5 &lt;br&gt;&lt;br&gt;&lt;strong&gt;499,99&amp;euro;&lt;/strong&gt;&lt;/p&gt;
  &lt;/a&gt;
  &lt;/div&gt;
              &lt;div id="gp"&gt;
                  &lt;i class="fas fa-list"&gt; Electronic devices&lt;/i&gt;
  &lt;a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product4.html"&gt;
      &lt;img src="gopro.jpg" alt="gopro"&gt;&lt;/img&gt;
      &lt;p&gt;GoPro Hero 9 &lt;br&gt;&lt;br&gt;&lt;strong&gt;319&amp;euro;&lt;/strong&gt;&lt;/p&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  
          &lt;div id="gm"&gt;
              &lt;i class="fas fa-list"&gt; Video games&lt;/i&gt;
  &lt;a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product8.html"&gt;
      &lt;img src="game2.jpg" alt="game" style="padding-top: 20px;"&gt;&lt;/img&gt;
      &lt;p&gt;The last of us 2 &lt;br&gt;&lt;br&gt;&lt;strong&gt;59,99&amp;euro;&lt;/strong&gt;&lt;/p&gt;
  &lt;/a&gt;
  &lt;/div&gt; 
              &lt;div id="tn"&gt;
                  &lt;i class="fas fa-list"&gt; Sports equipment&lt;/i&gt;
  &lt;a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product6.html"&gt;
      &lt;img src="tn2.jpg" alt="sporty outfit" style="padding-top: 20px;"&gt;&lt;/img&gt;
      &lt;p&gt;PSG Kit &lt;br&gt;&lt;br&gt;&lt;strong&gt;99,99&amp;euro;&lt;/strong&gt;&lt;/p&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  
              &lt;div id="pt"&gt;
                  &lt;i class="fas fa-list"&gt; Outfits&lt;/i&gt;
  &lt;a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product7.html"&gt;
      &lt;img src="pants2.png" alt="pants" style="padding-top: 20px;"&gt;&lt;/img&gt;
      &lt;p&gt;&amp;ensp;&amp;ensp;Fit Trouser Pants &lt;br&gt;&lt;br&gt;&lt;strong&gt;39&amp;euro;&lt;/strong&gt;&lt;/p&gt;
  &lt;/a&gt;
  &lt;/div&gt;
                  
                  
              &lt;div id="snk"&gt;
                  &lt;i class="fas fa-list"&gt; Sports equipment&lt;/i&gt;
  &lt;a class="prd" href="file:///C:/Users/Gh0st/Desktop/project.main/product5.html"&gt;
      &lt;img src="nike.jpg" alt="sneakers"&gt;&lt;/img&gt;
      &lt;p&gt;Nike Sneakers &lt;br&gt;&lt;br&gt;&lt;strong&gt;149.99&amp;euro;&lt;/strong&gt;&lt;/p&gt;
  &lt;/a&gt;
  &lt;/div&gt;
          &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>