How to hover links in nav bar-CodePudding

I am sure others might have experienced the same problem, but not only am I new to CSS, English is also not my main language, and therefore I don't really know how to go about researching on how to solve this issue. I don't know what to call this situation. Basically, upon hover, the text slightly moves instead of staying where it belongs. I am assuming I am doing something wrong with paddings. But I know that it is possible to have this "button" effect, as in, the background color of the hover effect having that size, but I really can't figure out a solution... I have been hours and hours trying different methods but no success. I am also not sure if I am styling the links properly. Can someone help please?

Here's my navbar CSS code below:

 .nav-items {
    display: flex;
    transform: translateX(0px);
    margin-right: 5%;
    
  }
  
  .nav-items li {
    list-style: none;
    padding: 25px;
  }
  
  .nav-items a {
    color: white;
    text-decoration: none;
    letter-spacing: 1px;
    font-size: 14px;
  }
  
  .nav-items li a:hover {

    background-color:#006aff;
    padding: 20px;
    transition: 0.2s ease-in-out;

  }

CodePudding user response：

As I can see you are adding the padding in the hover state.

Your code should be like this the way you have described you want to show the navigation items.

.nav-items a {

   color: white;
   text-decoration: none;
   letter-spacing: 1px;
   font-size: 14px;
   padding: 20px;
   transition: 0.2s ease-in-out;

}

.nav-items li a:hover {
    background-color: #006aff;
}