Horizontal align Navigational Toolbar

[FrustratedGrad]

I am having difficulty knowing what to do to complete my toolbar...I feel I have everything but it is not actually aligning horizontally--inline--with spaces in between each tab. I would like it to look much like the toolbar on this site, but instead it is aligned two next to each other and then two on top of that.
Could someone tell me what I am missing? Thanks for any available help.

CSS:
.toolbar ul {
    margin:0px;
    padding:0px;
    text-align:center;
    list-style-type:none;
 
}
   .toolbar ul li {
    display:inline;
 
}
   .toolbar ul li a {
    text-decoration:none;
    padding-right:30px;
        background-color:#990000;
        border-style:solid;
    border-color:#000000;
    border-width:1px;            
    padding:10px;
    font-family:"Gadget", sans-serif;
    font-size:14px;
    font-weight:bold;
    position:relative;
    top:100px;
    left:320px;
    vertical-align:bottom;    
 
}
   a:link {
    color:#ffffff;
}
 
HTML5:
<div class="toolbar">
<ul>
    <li><a href="content.html">Course Content</a></li>
    <li><a href="resources.html">Related Resources</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="pilot.html">Home</a></li>
</ul>
    </div>

[nomad]

Make a division for your toolbar.
#toolbar ul {

}