How can I highlight text within an element upon hover, rather than the whole element and its padding? CSS/HTML

Question

I'm trying to achieve a certain hover effect for my navbar text which is probably better shown than explained.

The desired effect:

https://i.sstatic.net/X0KOW.png

What I'm getting:

https://i.sstatic.net/CDtPu.png

My Code:

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;
}

li a {
    
    display: block;
    color: black;
    padding: 22px 20px;
    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>

Answer 1

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>