如何将 HTML 中的列表项居中

Question

I'm trying to start off with a simple website and I want to know how I can fix my navigation bar since I accidentally messed up my code leaving it in a misaligned state. I seem to have checked my CSS properly and I don't see anything wrong with it.

From what I've done, I double checked to make sure I remembered to close my tags and check the CSS.

 #mainnav { margin: 0 auto; padding: 0; text-align: center; } #mainnav ul { display: inline-block; list-style: none; } #mainnav ul li { float: left; margin: 0px 20px 0px 0px; /* spacing in-between the boxes */ padding: 10px 20px 10px 20px; /* spacing inside the boxes */ }

 <nav> <div id="mainnav"> <ul> <li><a href="index" class="nav-home">HOME</a></li> <li><a href="about-me.html" class="nav-about-me">ABOUT ME</a></li> <li><a href="vpnhole.html" class="nav-vpnhole">VPNHOLE</a></li> <li><a href="projects.html" class="nav-projects">PROJECTS</a></li> <li><a href="misc.html" class="nav-misc">MISC.</a></li> </ul> </div> </div> </nav>

I expected the output of the navigation links to be aligned where one link is aligned to the a picture in the website, but the actual output turned out to be off by a couple centimeters.

Answer 1

If I correctly understood the task - it should help

ul{
    padding: 0;
}