My li elements move downwards when I hover over them [duplicate] - html

Question

This question already has answers here:
Add a CSS border on hover without moving the element [duplicate]
(4 answers)
Closed 2 years ago.
My primary nav li elements shift downwards whenever I hover over them. I thought this was due to use of margin causing this, but I am still receiving this issue after removing margin use, and I'm not sure what it is. I know it's most likely something simple. Any help would be appreciated. Thank you.
/*primary nav bar*/
.primarynav {
background-color: #ffffff;
border: solid 1px #f76f4d;
position: relative;
height: 50px;
width: 1430px;
top: 10px;
}
.primarynav ul {
position: relative;
padding-bottom: 10px;
text-decoration: none;
padding-left: 100px;
}
.primarynav a {
position: relative;
display: inline-block;
text-decoration: none;
color: #fd886b;
width: 115px;
height: 50px;
padding: 17px 0px 0px 0px;
font-weight: bold;
border: 1px solid orangered;
}
/*primary navigation effects*/
/*.primarynav a:hover::before {
background-color: #fd886b;
}
*/
.primarynav a:hover {
color: white;
background-color: #fd886b;
border: 2px solid orangered;
border-radius: 3px;
}
.mainnavigation li {
display: inline-block;
bottom: 51px;
padding-top: 50px;
text-align: center;
position: relative;
font-size: 15px;
left: 200px;
}
<header class="primarynav">
<div class="primaryContainer"> <!-- Main top of page navigation -->
<nav alt="worldmainnavigation"><!-- Main navigation buttons on the top of the page (6) -->
<ul class= "mainnavigation">
<li>Home</li>
<li>Items</li>
<li>Categories</li>
<li>Favourites</li>
<li>Deals</li>
<li>List An Item</li>
</ul>
</nav>
</div>
</header>

Answer 1

Adding margin: -2px; resolves this, its due to the border: 2px orangered.
.primarynav a:hover {
color: white;
background-color: #fd886b;
border: 2px solid orangered;
margin: -2px;
border-radius: 3px;
}
/*primary nav bar*/
.primarynav {
background-color: #ffffff;
border: solid 1px #f76f4d;
position: relative;
height: 50px;
width: 1430px;
top: 10px;
}
.primarynav ul {
position: relative;
padding-bottom: 10px;
text-decoration: none;
padding-left: 100px;
}
.primarynav a {
position: relative;
display: inline-block;
text-decoration: none;
color: #fd886b;
width: 115px;
height: 50px;
padding: 17px 0px 0px 0px;
font-weight: bold;
border: 1px solid orangered;
}
/*primary navigation effects*/
/*.primarynav a:hover::before {
background-color: #fd886b;
}
*/
.primarynav a:hover {
color: white;
background-color: #fd886b;
border: 2px solid orangered;
margin: -2px;
border-radius: 3px;
}
.mainnavigation li {
display: inline-block;
bottom: 51px;
padding-top: 50px;
text-align: center;
position: relative;
font-size: 15px;
left: 200px;
}
<header class="primarynav">
<div class="primaryContainer"> <!-- Main top of page navigation -->
<nav alt="worldmainnavigation"><!-- Main navigation buttons on the top of the page (6) -->
<ul class= "mainnavigation">
<li>Home</li>
<li>Items</li>
<li>Categories</li>
<li>Favourites</li>
<li>Deals</li>
<li>List An Item</li>
</ul>
</nav>
</div>
</header>

Answer 2

it is because you add 3px border on hover.