title: Small space at start of nav bar preventing centering
body: <p>So I'm using an unordered list to create a horizontal navigation bar and I want to center that toolbar.  However, there's a small space at the start of the toolbar that is causing it to be slightly off center when I use text-align:center.  Here's a pic of it not centered:</p>
  
  <p><a href="https://i.stack.imgur.com/yC6fy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yC6fy.png" alt="Uncentered nav bar"></a></p>
  
  <p>I would like to get "Home" right up against the left most border.  But there seems to be about 20px space.  Here is a pic of the nav bar centered:</p>
  
  <p><a href="https://i.stack.imgur.com/22CII.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/22CII.png" alt="Centered nav bar"></a></p>
  
  <p>I feel like its off center because the 'Home' button is slightly off center with "Tristan Gianola."  Here is the CSS &amp; HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav{font-family: 'Roboto Condensed', sans-serif;
   font-size:14px;
   text-transform:uppercase;
   margin:0;
   padding:0;
   margin-top:50px;
   border:solid 5px red;
   text-align:center;}
  nav ul{border:solid 5px green;}
  nav ul li{display:inline;
    margin:2px;}
  nav ul li strong{text-decoration:none;
      color:#003434;
      background:#f2f2f2;
      padding:10px;}
  nav ul li a{text-decoration:none;
     color:#f2f2f2;
     background:#003434;
     padding:10px;
     border-bottom:solid 1px white;}
  nav ul li a:hover{background:grey;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;!--site navigation / toolbar--&gt;
   &lt;nav&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="media.html"&gt;Media&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="calendar.html"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="projects.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/nav&gt;
   
   &lt;h1&gt;Tristan Gianola&lt;/h1&gt;
   
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks so much for reading/answering in advance.  </p>