Centering WP3 Menu with Dynamic Width

I have been struggling for many hours now with what I’m sure is a trivial little issue. I am still pretty new with CSS, but I have been editing a custom theme and have been able to make it do most of what I want it to. However, I am stuck on this one thing:

I have a WP3 dynamically-generated menu that wants to sit centered at the bottom of my “archive”-style pages. It basically allows the user to filter my posts by a few specific tags. I also use a WP3 menu in the header” primary-nav-menu” but this one is a secondary menu called “archive-filter-menu”. My big issue is that I cannot seem to get it to be both centered on the page and the right width. I have been moving it in and out of different classes, ids, divs, tables, etc for 2 days now and with the dynamic width, I just can’t find a version that quite works. When I get it centered (by setting the archive-filter style to “display:table” it is somehow squeezing into a constrained width (don’t know why) so the menu breaks onto a second line. When I get it to all be in one line (change the archive-filter style back to “display:block”, it is no longer centered, but rather left-justified.

The other complication is that it is using the same styles (“nav”) as the main navigation menu in the header, which looks and works fine. I would like to keep it that way if possible, but I am struggling with figuring out how/where CSS styles are stepping on each other.

Here is the php code at the bottom of my archive page:

<div id="archive-filter">
    <ul id="nav">
	<li class="left"></li>
	<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'archive-filter-menu' ) ); ?>
	<li class="right"></li>
    </ul>
</div>

And here is the relevant (i think) CSS:

[CSS moderated as per the Forum Rules. Please just post a link to your site.]

Thanks in advance for any/all help!