Css – Border moving with hover

I have two links in a nav bar that need to sit perfectly centered and 50/50 on the page. That part I struggled with but finally got them to sit right. I needed a grey bottom border to span the entire page and when you hover the grey under the links needed to turn blue. Here’s an example:

example

Here’s what i have for the html:

    <div class="topnav">
        <a class="accommodations" href="#accommodations">Accommodations</a>
        <a class="activities" href="#activities"> Activities </a>
    </div>

Here’s what I have for the mobile css:

.topnav {
    padding-top: 17px;
    border-bottom: solid 3px #808080;
    text-align: center;
    display: flex;
    border-top: none;
    padding-bottom: 10px;
}

.topnav a {
    width: 50%;
    padding-top: 17px;
    border-top: none;
}

.topnav a:hover {
    padding-top: 17px;
    border-top: none;
    border-bottom: solid 3px #0065fc;
    padding-bottom: 10px;
}

When I add the hover affect it does have the blue bar however, instead of covering the grey it appears on top and seems to push the grey bar down. On the desktop dimensions the hover has to appear at the top with a space between the words and the bar which is why I have the padding on the top. Without it the words move when you hover over them.

I’ve tried adjusting/adding/removing the padding on the bottom, adding a border bottom to the individual elements rather than the whole, and even played with negative margins just to see if by some miracle it made this problem go away. It does sort of work with adding a border bottom to the individual elements but the border doesn’t span the entire page and instead stops just after activities with this weird gap on the right.

I would also like to add that I have maybe a months worth of experience with coding, and by experience i mean trial by fire and no direct teacher so everything I know is from various books, googling, and free coding camps. I am probably doing something very obviously wrong and I apologize but any help would be greatly appreciated because I can tell you begging it to work hasn’t helped yet.

–update–
okay so i found that if i remove the border from the .topnav and instead put it on the individual the hover works the way I want it to however i’m still running into the issue of the border not spanning the entire page and instead having the weird space on the right side after activities.