My Links took LSD but Now they are Okay
Step 1: Right now, when you use text-decoration: none; you will not notice any changes. So what is the purpose of this? Text decorator can add stylizing to the text. It can put a line through the text, under/over it or make it blink. None is the default setting. This means the text is normal. E.g. it doesn’t look like this “T̶e̶x̶t̶” because in all honesty that is stupid. Why would you need that?
Step 2: Under the text-decoration line, you should add position: relative; Like the name indicates is about… well…you guessed it right, positioning. It tells you what positioning method is being used on an element. There are four positioning options static, relative, absolute, and fixed. The relative option does not change the layout. This causes whatever follows it to have the same position applied to it, as well. This takes charge over where the element would have been placed by default.
If you look lower on the page, you will see position: absolute; Absolute, positions the element in relation to the boundaries of its closest non-static parent. For example, adding top: 10px; will cause the element to be 10px down from the top of the similar element that came before it.
Step 3: Wait why did you have a problem, was that ever talked about? That is what will be discussed now.
↑This aligns the text by pushing it down 50% of the parent’s height and bringing it back up 50% of the texts height.
The problem lies within the menu items width for whatever reason. It just didn’t like (work) to have a default width. To combat this you can add a fixed-width. Here 75px makes it look normal. If you can’t visualize a good pixel width, just play with it until it looks normal.