Aguusie bobelsa fokwepw


I know you said without bootstrap but I highly recommend bootstrap, it’ll help you not go insane later, but if you must, then use margin and padding to position, but then it will not look nice on any screen other then your resolution.

Try putting margin-left: auto and margin-right:auto on the UL element.

flexbox is a good candidate for what you’re looking for.

ul { 
display: flex; //make your ul element a flex element
flex-direction: column; //set the direction of the children (lis) to be column instead of row

li {
align-self: center; //and the magic you're looking for, aligning the li's to the center

note that while looking at your pen and adding my styles, i commented out any floats and explicitly set widths/heights as that would likely mess with things. Also removed your % based margins on the body. Its best not to set margins to create a container on the body class, add a wrapping div to do that for you. Happy coding, hope this helps you!