Centering Navigation Buttons in CSS/HTML

[RedArmy]

As the title says, I'm having a bit of an issue centering my navigation buttons within a navigation "footer" I guess you could say, which is right below the header portion of the website.

ul#navlist
{
 list-style-type:none;
 margin:0 auto;
 padding:0;
 overflow:hidden;
 width:auto;
}

#navlist li
{
 float: left;
 list-style-type: none;
 position:relative;
}

#navlist a:link,#navlist a:visited
{
 display:block;
 font-weight:bold;
 color:#FFFFFF;
 background-color:#333333;
 width: 100px;
 text-align:center;
 border-left:1px solid #993300;
 padding:4px;
 text-decoration:none;
}

#navlist a:hover,#navlist a:active
{
 background-color:#000;
}

#navigation {
 width: 1100px;
 color: #FFF;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 0px 0px;
 background: #993300;
}

<div id="navigation">
		<strong>
			<ul id="navlist">
			<li><a href="#">First</a></li>
			<li><a href="#">Previous</a></li>
			<li><a href="#">Next</a></li>
			<li><a href="#">Last</a></li>
			</ul>
		</strong>
</div>

Those are the relevant code snippets above. I've gotten it super close to being centered using 'width:500px;' but if I go any farther than that it starts backing up onto itself. I've tried about 5 different examples and they've all turned out worse than what I have and it seems to be a common issue so I was wondering if anyone could explain to me what I might need to change. Thank you!

Edit: Figured it out, thanks to: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support. Maybe this will help someone like it did for me!

 

[Markbnj]

Thanks for posting back with your solution.