How To Center Lists in HTML

Issue

I'm trying to start with a simple website and I want to know how I can align my navigation bar. My navigation bar is in the form of a list. I'm not sure why the list's position seems a bit out of place when implementing it. So far, I've double-checked for closed tags and any modifications in styling my list. I expected the output of the page to have an even gap at its borders, but the list is instead crooked by a few pixels.

#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>
</nav>

Edit: Attached is a short video showing the change in the bar's position with and without setting padding to zero (from marked answer). It is somewhat difficult for me to visually represent the position of the navigation bar (the gray background probably gets pushed off the screen when aligning). https://youtu.be/J5XwdJn1pDA

Solution

If I correctly understood the task - it should help

ul{
    padding: 0;
}

Answered By - Sergej