title: How To Center Lists in HTML
body: <p>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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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 */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;div id="mainnav"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="index" class="nav-home"&gt;HOME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="about-me.html" class="nav-about-me"&gt;ABOUT ME&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="vpnhole.html" class="nav-vpnhole"&gt;VPNHOLE&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="projects.html" class="nav-projects"&gt;PROJECTS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="misc.html" class="nav-misc"&gt;MISC.&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>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). <a href="https://youtu.be/J5XwdJn1pDA" rel="nofollow noreferrer">https://youtu.be/J5XwdJn1pDA</a></p>