title: HTML/CSS: unordered list in nav element slightly offset right
body: <p>I recently made a nav bar with centered content, containing an unordered list of <code>inline</code> list items (two or three buttons).</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>nav,header {
      display: block;
      margin: 0.5rem auto;
      padding: 0;
      list-style-type: none;
      text-align: center;
  }
  ul {
      list-style-position: none;
      display: block;
      margin: 0;
  }
  li {
      display: inline;
      margin: 0;
      padding: 0.7rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a class="btn" id="one" href="#"&gt;button 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a class="btn" id="two" href="#"&gt;button 2&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/u7Kkd.png" rel="nofollow noreferrer">Nav bar slight misalignment to the right</a></p>
  
  <p>The content was roughly centered, but slightly offset to the right. (It's easy to miss, but pops out when the list and the element above it are similar length). I suspected this was due to 'ghost bullets,' because of the positioning, but I tried setting <code>list-style-position</code> to <code>outside</code> or <code>none</code> and manipulating various margin, padding and align features with no luck. (Note: the solution is zero-padding in the <code>ul</code>, see below).</p>