Because on hover, you are targeting a which has padding and it’s calculated from a whole size, so easily move the padding: 22px 20px; under li a and put it inside li.
ul {
list-style-type: none;
position: static;
margin: 0% 30%;
padding: 0;
overflow: hidden;
border-top: 6px double black;
border-bottom: 6px double black;
}
li {
float: left;
padding: 22px 20px;
}
li a {
display: block;
color: black;
text-align: center;
text-decoration: none;
}
a.one:link {
text-decoration: none;
color: rgb(0, 0, 0);
}
a.one:visited {
text-decoration: none;
color: rgb(0, 0, 0)
}
a.one:hover {
text-decoration: none;
background-color: #f7c576
}
a.one:active {
text-decoration: none;
}<nav>
<ul>
<li><a class="one" href="#">HOME</a></li>
<li><a class="one" href="#">ABOUT</a></li>
<li style="float: right"><a class="one" href="#">DONATE</a></li>
<li style="float: right"><a class="one" href="#">MAGAZINE</a></li>
</ul>
</nav>