title: How to center navigation bar items CSS
body: <p>I have a navigation bar that it spanning the entire page's width. I've also added a jQuery script so that it changes to position:fixed after scrolling for a bit, but I don't think that will influence this issue.</p>
  
  <p>My issue is that I can't get the navigation bar <code>&lt;li&gt;</code>'s to center. I've tried countless things I've found on the internet, and even downloaded some templates to splice in. No luck. I'm sure I'm just missing something, but I'd like the <code>&lt;li&gt;</code>'s to go smack-dab in the middle of the navbar, but everything I've tried either makes them slightly off, floats them to the left, or makes them not resize properly.</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="script.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;h1&gt;Blah blah blah&lt;/h1&gt;
  
          &lt;!--START NAVBAR--&gt;
          &lt;div class="nav"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!--STOP NAVBAR--&gt;
  
          &lt;div class="content"&gt;
              &lt;p&gt;
              Lorem ipsum dolor sit amet...
              &lt;/p&gt;
              &lt;p&gt;
  
              Nullam pellentesque nunc luctus...
              &lt;/p&gt;&lt;p&gt;
              Donec sodales fermentum orci...
              &lt;/p&gt;&lt;p&gt;
              Ut venenatis tellus ...
              &lt;/p&gt;&lt;p&gt;
              Nullam quis molestie nunc...
  
              &lt;/p&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>body{
  background-image:url("woodPatternShadow.png");
  background-size:75% auto;
  padding:0;
  font-family:"Verdana";
  }
  
  
  
  .nav{
  height:40px;
  background-color:rgba(0,0,0,0.25);
  left:0;
  right:0;
  box-shadow: inset 0 3px rgba(255, 255, 255, 0.4), inset 0 10px 4px rgba(255, 255, 255, 0.3),inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(28,0,0,0.3);
  border:1px solid rgba(0,0,0,0.1);
  margin:0;
  position:absolute;
  }
  
  #fixNav{
  position:fixed;
  top:0px;
  }
  
  .nav ul{
  }
  
  .nav ul li{
  }
  
  .nav ul li a{
  }
  
  .content{
  background-color:white;
  border-radius:20px;
  padding:10px;
  width:70%;
  margin:100px auto 0;
  }
  </code></pre>
  
  <p>The empty selectors are the places where I can't figure it out. </p>
  
  <p>Can someone clear this up for me?</p>