Trying to get <div>s lined up in menu

Hiya. Basically, the small navigation buttons near the top of my site (under the main menu) are not lining up as I’d like. Check it out: https://www.brawlinthefamily.com

Basically, I’d like the “next” and “previous” arrows (which you can see on the left side, under the “About” button) to be in a solid row with the ones on the right side (under the “Links” button). As it is, the <div>-functioning buttons (“next” and “previous”) float in relation to the left side of the browser window, and I’d prefer to have all five buttons in a single, centered row in an order like “First Comic”, “Previous Comic”, “Random Comic”, “Next Comic”, and then “Latest Comic”.

Code:

<style>
.toolbar {
   DISPLAY: inline;
background-color:#ffffcf;
border:0px solid;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
margin:0;
padding:.0em;
zoom: 0;}
</style>
<ul class="toolbar">
<center><li><a href="https://www.brawlinthefamily.com/?p=28"><img src="https://www.brawlinthefamily.com/images/firstcomicmini.png" /></a><div class="nav-previousa"><?php global $wp_query; $wp_query->is_single = true; previous_comic_link('%link', '<img src="https://www.brawlinthefamily.com/images/leftmini.jpg" />'); $wp_query->is_single = false ?></div></li><a href="/?randomcomic"><img src="https://www.brawlinthefamily.com/images/random.jpg" /></a><li><div class="nav-nexta"><?php global $wp_query; $wp_query->is_single = true; next_comic_link('%link', '<img src="https://www.brawlinthefamily.com/images/rightmini.jpg" />'); $wp_query->is_single = false ?></div><a href="https://www.brawlinthefamily.com"><img src="https://www.brawlinthefamily.com/images/latestcomicmini.png" /></a></li><h2><?php the_title() ?></h2></ul>
</center>

CSS:

.nav-previousa  {
		padding: 0 0 0 400px;
		float: left;
		}

	.nav-nexta  {
		padding: 0 10px;
		float: left;
		border-right: 0px solid #000;
		border-left: 0px solid #000;
		}

Thank you very much for any suggestions.