List hovering messing with the whole nav div - hover

Question

im very very new to coding, like days in and theres this problem thats been driving me crazy.
Whenever i hover links or anything for some reason the whole parent of that list or other elements of the list kinda like twitch and change positions. Either way what can i do to make it so when i hover one element doesnt effect other elements.
<nav id="firstnav">
<ul class="firstList">
<li Purple Buzz</li>
<li Home</li>
<li About</li>
<li Work</li>
<li Pricing</li>
<li Contact</li>
</ul>
</nav>
#firstnav{
width: 100%;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.firstList{
list-style: none;
display: inline-flex;
}
.firstList{
margin-left: 35%;
}
li{
margin-right: 30px;
margin-left: 30px;
}
li:hover{
border: solid 1px purple;
border-radius: 80px;
padding: 10px;
}

Answer 1

First: you forgot the closing rafter > of the li.
The problem is the padding and the border added on hover.
The padding and hover change the initial size of your html element which causes the other elements to shift and the parent to grow in your case. To fix this, you can already set the padding initially. the border you set with a transparent color. then on hover, you simply change the color of the border.
like here below.
#firstnav{
width: 100%;
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.firstList{
list-style: none;
display: inline-flex;
}
.firstList{
margin-left: 35%;
}
li{
margin-right: 30px;
margin-left: 30px;
padding: 10px;
border: solid 1px transparent;
}
li:hover{
border-color: purple;
border-radius: 80px;
}
<nav id="firstnav">
<ul class="firstList">
<li> Purple Buzz</li>
<li> Home</li>
<li> About</li>
<li> Work</li>
<li> Pricing</li>
<li> Contact</li>
</ul>
</nav>