html/css .hover/nav bug, @media bug, CIS122

The website which my example/code is hosted on for better/easier access:

https://cislinux.hfcc.edu/~jdcline/cis122/homework-2/hw2html.html

The link to my code/example on Tryit Editor on W3school:

https://www.w3schools.com/code/tryit.asp?filename=FVH30WWEAH8R

I would like to mention that this may seem like a simple problem and has an easy solution, better ever since I got off work I've been trying to look into how to solve this and nothing works so far, if there is another StackOverflow question similar to mine I'm sorry and I'll delete this post, but I've tried searching and haven't got an answer yet. (I'm not just trying to use this for answers so I don't want it to seem that way, even leaving tips or suggestions will help)

So here it goes, when you click that link that host my example/code you will see on the nav there is two links/.hover, this links to my last assignment and my current assignment. But when you hover over it you will see that to the far right of the box only a part of it is actually lit up.

I'm trying to solve this so the entire thing is dark red, now what I realized was the text decides how much of the box gets filled up, if the text is smaller (like just "client") the .hover is much smaller. I'm also trying to fix this issue which is very similar but I don't know if the code that might work for the first question will work for this one, below is the picture of what I am talking about. When I hover over it now (when the screen is smaller than 700px it does that) How can I make it so the entire bar gets filled up instead of just the small box you see in the picture, this also causes me a huge conundrum because I tried making the text "Client Server" and "Hosting Domain" centered whenever it goes on top of the screen like that but it doesn't work, I don't understand how I can make it centered only when the screen is smaller than 700px (which makes it go on top instead of on the side)

I added an extra picture in case you may need it, any suggestions are very appreciated as I just started getting into HTML/CSS a few weeks ago and I'm still very much learning it. Also do you think I should keep the nav on the side where it currently is or change it where it stays on the top like it does when its under 700px, I'm not sure what is nicer and any ideas are appreciated as I'm still trying to figure out what looks the nicest. (You'll also see when the page is under 700px the profile tab goes to the bottom where it looks terrible, I'm currently trying to fix that so maybe it goes under the nav but that's another bug for another time so do ignore that or just give me a tip but please not an answer as I'm trying to figure out how to do it myself)

It might seem that I'm just asking a bunch of questions just to get answers and a perfect page but please understand I started HTML/CSS around August 27th which is when I started classes and I'm still trying to learn. This page so far has over 400 lines of code and it's really hard to manage all of it so it might have some validation issues but I'm working on fixing everything,I'm afraid people may down vote this because it seems like a simple solution but I've been working on this since I got off work and it's challenging me as no matter what I try to add it just does nothing or ruins something else, my friend told me this is because I have a lot of code and one thing changes everything else. I deeply appreciate all tips/suggestions/answers/advice and anything in between, at the end of the day I'm just a young coder trying to become something bigger.