How to get rid of the space allotted for a ul so my lis line up properly

Question

I’m trying to make a sidebar that has 8 options. I’d like to put a border around each option, but the positioning is off. I also want the text of the options to be vertically aligned middle. I could just remove the list and use 8 divs, but what’s the best way to do this?
Ignore the garish colors. They’re so I can see what’s happening.
https://code.sololearn.com/W5vBJPf4i7BZ/?ref=app

Answer 1

<!--I have learned only CSS basics and I have almost quit learning it due to lack of time for my studies and other languages. So don't take this as expert advice.
I have read this in others code and have tried in your code as well-->

Yes , you are right you should use list tag for navbars options. In html 5 semantics are really important. You should you semantic tags over divs as much as possible.

●To align text of each option horizontally to middle use text-align:center;
But to align it vertically you need to specify the height of line. This height should be equal to height of list element i.e 10vh

li{
text-align:center;
vertical-align:center;
line-height:10vh;
}

●To fix indentation issue with list make padding and margins 0 in your code
ul{
padding:0;
margin:0;
}
●remove width:25vw; from li 25
example for you:
https://code.sololearn.com/WY4Vdw6wd8v4/?ref=app
As stated in code, You can copy only if you learn something from it.

One more by Gordon sir
https://code.sololearn.com/W3gS00IGw160/?ref=app

Answer 2

Rora
Remove width:25vw; from LINE 25 in css

Answer 3

1. If you want the border doesn't enlarge the element, use

box-sizing : border-box;

https://code.sololearn.com/WN9sGuiMoi99/?ref=app

2. For commenting in CSS, it is /* */

Answer 4

It’s still a drop off (see code again).

Answer 5

Gordon I know how to make CSS comments, I just did it that way because it’s easier and it was for me to mess around with. The whole line will be removed in the final version