How to make a hover effect on ul li a tag

I'm trying to make a hover effect for my navbar links, in which when they're hovered, a border bottom line animates it's way in. I've tried using this:

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

This partially works, the bottom line appears when hovered (obviously with no animation cause I didn't do that part yet). The thing is that when they're hovered, not only a bottom border appears, but also al the options move, like if the border bottom causes the whole navbar to move each link a little in an opposite direction, like if they are trying to keep distance from each other. How can I fix this issue? I'll leave the HTML code of the navbar and some css code:

HTML:

    <ul class="nav-links">
    <li><a href="">HOME</a></a></li>
    <li><a href="">PORTFOLIO</a></a></li>
    <li><a href="">SUBMIT</a></a></li>
    <li><a href="">CONTACT</a></a></li>
    <li><a href="">ABOUT</a></a></li>
    </ul>

CSS:

* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}

body {
background-color: #900c3f;
}

img {
width: 130px;
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
}

nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #ff5733;
}

li:hover a {
box-sizing: border-box;
width: 100%;
border: solid #F5F5F5 5px;
padding: 5px;
border-top: 0px;
border-left: 0px;
border-right: 0px;
}

.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}

.nav-links li {
list-style: none;
}

.nav-links a {
text-decoration: none;
font-family: Poppins;
color: #F5F5F5;
letter-spacing: 3px;
font-weight: bold;
font-size: 130%;
}

Are there any divs that should be added to the navbar? Or what I'm doing makes no sense? I'm still learning so it's possible that I'm making a mess.

Here's a screenshot just in case:

Screenshot of hovered navbar

Thanks SO community!

Solution

Is this what you asking? ( you have to view in full screen for good visualization)

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body {
  background-color: #900c3f;
}

img {
  width: 130px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  width: 80%;     
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  font-family: Poppins;
  color: #F5F5F5;
  letter-spacing: 3px;
  font-weight: bold;
  font-size: 130%;
  margin: 10px;
}

.nav-links li a:hover {
  border-bottom: 5px solid white;
  padding-bottom: 3px;
}

<ul class="nav-links">
  <li><a href="">HOME</a></li>
  <li><a href="">PORTFOLIO</a></li>
  <li><a href="">SUBMIT</a></li>
  <li><a href="">CONTACT</a></li>
  <li><a href="">ABOUT</a></li>
</ul>