Problem with hover and positioning

I am currently in the process of developing a landing page inspired by Supreme’s landing page. However, I have been facing a challenge for almost a week in configuring the hover effect to only extend to the width of the element. Additionally, I want to position my footer center and horizontally, but the menu class is not cooperating and keeps moving (besides the supreme image)

For context, I’m a front-end developer with almost 2 months of experience, and want to improve in HTML CSS, and JavaScript. Supreme has all of the components I need to learn all of the above.

I believe this may have occurred because my HTML structure isn’t formatted properly
and I may have redundant code in my CSS

Are those supposed to be links inside of the list items? If so, make them links and then set the :hover on the link instead of the list item.