Can't centre navigation bar? - html

Question

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...
HTML:
<div id="header">
<h1>Midlands Car Club</h1>
<ul id="nav">
<li>Home</li>
<li>Members</li>
<li>Cars</li>
</ul>
</div>
CSS:
//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;
}
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...

Answer 1

#nav {
width : "however wide you want it";
margin: 0 auto;
}
It's the margin: 0 auto; that centers the element.
You could also use text-align on the parent element, but the margin trick is most commonly used.