So I am trying to underline the text that is being hovered but when the underlined is applied the li expands downwards (as you can see under the tournaments tab). I have tried setting padding to 0 on hover (which worked with the top il’s) but it is still not working :/
I’m sorry to say, but a 200 line CSS file isn’t something that many people will want to pick through. You should try to reduce it to just the pertinent parts, so that just enough remains to demonstrate the issue (I reckon you could do it in less than 20 lines).
That said, if the hover is adding border-bottom: 4px solid white;, try putting border-bottom: 4px solid transparent; on the default/un-hovered state. This should neutralise the jump – the logic being that the border will be there all the time but it will only turn white when a button is hovered.