Property TransformX(0%) is not being applied to the unordered list

I am creating this mobile nav-bar that fades in and fades out when I click the menu button(this button appears when I reach out to about 800px). By default the menu has a transform: translateX(100%); and when I click the button it applies the class and styles .nav-active{ transform: translateX(0); } , the menu is supposed to appear on the screen, but the style is just not being recognized.

Here is my code so far.

const navSlide = ()=>{
    const burger = document.querySelector('.burger'); 
    const nav = document.querySelector('.nav-links'); 

    burger.addEventListener('click', ()=>{
     nav.classList.toggle('nav-active');
    });
}

navSlide(); 
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,[email protected],400;0,700;1,400;1,700&display=swap');

/* font-family: 'PT Serif', serif; */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --mainFont: 'PT Serif', serif;
  --charcoal: #264653ff;
--persian-green: #2a9d8fff;
--orange-yellow-crayola: #e9c46aff;
--sandy-brown: #f4a261ff;
--burnt-sienna: #e76f51ff;
--columbia-blue: #c8ecfaff;

}


header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: var(--mainFont);
  background-color: var(--orange-yellow-crayola) ;
  /* background-color: var(--heat-wave); */
  padding:12px;

}

header#header div#company-logo {
  width: 30%;
  /* margin-left: 5px; */
}

header#header div#company-logo img{
  width: 60%;
}
nav#nav-bar {
  margin-left: 22px;
  display: flex;
  width: 70%;
}
.nav-links{
  display: flex;
  /* background-color: var(--carolina-blue); */
  justify-content: space-around;
  width: 100%;
  align-items: flex-end; 
  margin-left: 44%;
  padding: 12px;
}
 
.nav-links a{ 
  color: var(--alice-blue);
  text-decoration: none;
  letter-spacing: 4px;
  font-size: 1.5vmax ;
  font-family: var(--mainFont);
  margin-right: 3px;
  color: white;
  justify-content: space-around;
  /* margin-right: 55px; */
}
.nav-links li{
  list-style-type: none;
  
}
.nav-links a:hover{
  border-bottom: 3px solid white;
  border-top: 3px solid white;
  padding-bottom: 3px;
 }
  
 .burger {
  display: none;
}
 .burger div{
   width:25px;
   height:3px;
   background-color: white;
   margin: 5px;
 }

 @media  screen and (max-width: 1024px){
   
    .nav-links{
      display: flex;
      /* background-color: var(--carolina-blue); */
      justify-content: space-around;
      width: 100%;
      align-items: flex-end; 
      margin-left: 44%;
      padding: 12px;
    }
     
  
}
@media  screen and (max-width: 768px){
 nav#nav-bar .nav-links {
    /* dis:none; */
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
  width: 100%; 
  background-color: var(--orange-yellow-crayola) ;
  display:flex;flex-direction:column;
  align-items:center;
  transform: translateX(100%); 
  transition: transform 0.5s ease-in;
  }

  nav#nav-bar .nav-links li{
   opacity:0;
  }
 
  body{
    overflow-x: hidden;
  }
  
header#header div#company-logo {
 z-index: 1;
  /* margin-left: 5px; */
}
.burger {
  display:flex;
  flex-direction:column;
  flex: 1;
 
}

.burger div{
  display:flex;
  align-self:  flex-end;
  gap: -10px;
}

 div.line2, div.line3{
  margin-top: .6px;
}

.nav-active{
  transform: translateX(0); 
}


}
    <header id="header">
        <div id="company-logo">
            <img src="https://eldor48.github.io/product-landing-page/img/hamburger.svg" alt="hamburger logo" srcset="">
            <!-- <p>Hamburguer Boost</p> -->
        </div>
        <nav id="nav-bar">
            <ul class="nav-links">
                <li class="nav-link"> <a href="#">Home</a></li>
                <li class="nav-link"> <a href="#">Info</a></li>
                <li class="nav-link"><a href="#">Contact Us</a></li>
            </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </nav>

    </header>

Answer

Read up about CSS specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Also learn to use the developer tools built in to your browser. It will show you which styles are and are not applied, based on specifity.

The selector nav#nav-bar .nav-links has a higher specificity than the selector .nav-active so that its styles will be applied with higher priority.

To avoid that, when you have a class that is supposed to override another rule, make sure that the overriding rule has the same selector plus the modifier. In this case that would be nav#nav-bar .nav-links.nav-active.

One more tip: Don’t over-specify the selector. Also don’t use IDs to apply styles. IDs have the highest specificity, making it more difficult to override them. In your case instead of nav#nav-bar .nav-links, just .nav-links would be enough, and then the active selector would be .nav-links.nav-active.