CSS overflow and position

Question

I wish that when I'm with the mouse over the link, that blur will disappear and work properly if I don't add the line class. When I add the line class, everything breaks down, the links change position on the x-axis and only the Contact link is visible. How can I add that line for all 3 links without affecting the position and disappearance of the link blur?

And why does that navbar overflow-x occur? its width in css is 100 vw. I think it's from the mouseover event, but how can I prevent that overflow-x? Why does the navbar have that width?

const cursor = document.querySelector('.cursor');



const navLinks = document.querySelectorAll('nav ul li a');
const nav = document.querySelector('nav') ;

navLinks.forEach(link =>{
  nav.style.overflow='hidden' ;
  link.addEventListener('mouseover',e=>{ 
    e.target.classList.add('line');
   e.target.classList.remove('blur') ;
  
  })}) ;


  navLinks.forEach(link =>{
    link.addEventListener('mouseleave',e=>{
      
      
     e.target.classList.add('blur') ;
    })}) ;  

nav.addEventListener('mousemove' , function(mouse){
  const x = mouse.pageX +'px';
  const y = mouse.pageY +'px';
  cursor.style.left = x ;
  cursor.style.top = y ; 
  
})  ;

nav { 
  height:10vh;
  width:100vw;
  box-shadow:5px 0px 10px rgba(0,0,0,1);
  display:flex;
  align-items:center;
  background:gray;
  overflow:hidden;
  
  

  cursor:none;
  
  
    
}

.cursor{
  width:3vw;
  height:3vw;
  background:brown;
  border-radius:50%;
  position:absolute;
  pointer-events:none;
  transform:translate(-50%,-50%) ;
}
.logo{
  position:relative;
  width:10vw;
  height:100%;
  

}

.logo h2{
  position:absolute;
  top:50%;
  font-size:1rem;
  
  
}
nav ul { 
  display:flex;
  height:100%;
  width:90vw;
  position:relative;

}

nav ul li { 
  list-style:none;
  padding-left:15vw;
  position:relative;
  top:50%;

}

nav ul li a{ 

text-decoration:none;
font-size:1rem;
position:relative;
cursor:none;



}

.blur{
  filter:blur(3px);
}


.section{
  position:relative;
  top:3vh;
  width:100%;
  
  height:100vh;

}

.section1{
  background:red;
}
.section2{
  background:blue;
}
.section3{
  background:purple;
}


.line{
  width:1px;
  height:100%;
  position:absolute;
  background:black;
  animation:anime 1.5s linear infinite;
}
@keyframes anime {
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(100%);
  }
}

<nav>
          
          <div class ="logo">
            <h2 class ='logo'>logo</h2>
          </div> 
          <div class ='cursor'></div>

          <ul>
           
            
          <li><a class="blur  " href ="#">Home</a></a></li>
          
          <li><a class="blur  " href ="#">About</a></a></li>
          
          <li><a class="blur " href ="#">Contact</a></a></li>
          
          

          </ul>
         
        </nav>
            <div class ="section section1" >
            </div>

            <div class ="section section2" >

            </div>

            <div class ="section section3" >
            </div>                                           
             </div>