title: Can't centre navigation bar?
body: <p>I've looked at so many questions of people asking how to centre a navigation bar, and I've tried lots of things and just cannot get it to move...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="header"&gt;
    &lt;h1&gt;Midlands Car Club&lt;/h1&gt;
      &lt;ul id="nav"&gt;
          &lt;li&gt;&lt;a href="index.php" title="Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="members.php" title="Members"&gt;Members&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="cars.php" title="Cars"&gt;Cars&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>//header
  #header {
  width: 100%;
  height: 150px;
  }
  
  #header h1{
  font-family: "Vernada", sans-serif;
  font-size: 1.8em;
  text-align: center;
  }
  
  //navigation
  #nav ul {
  list-style-type: none;
  padding: 0;
  text-align: center;
  }
  
  #nav a {
  display: inline-block;
  width: 80px;
  background-color: #dddddd;
  text-align: center;
  }
  
  #nav li {
  display: inline;
  color: black;
  font-family: "Vernada", sans-serif;
  font-size: 1.2em;
  }
  
  #nav a:link {
  width: 120px;
  padding: 10px;
  display: inline-block;
  text-decoration: none;
  color: black;
  }
  
  #nav a:visited {
  display: inline-block;
  text-decoration: none;
  color: black;
  }
  
  #nav a:hover {
  text-decoration: none;
  color: grey;
  }
  
  #nav a:active {
  text-decoration: none;
  color: blue;
  }
  </code></pre>
  
  <p>Most likely missed something out, or just gone about it wrong altogether. I've managed to get it working in the past but have completely forgotten how I did it...</p>