CSS - Horizontally centering div in liquid layout - css

Question

All,
Have been banging my head at this for a over an hour and am still clueless how to go about solving this seemingly simple trick:
I want to horizontally center divs in my liquid layout.
Jsfiddle: http://jsfiddle.net/K26TN/
HTML Code:
<div id="menu_bars">
<div id="main_bar">
<ul>
<li id="overview_tab" class="maintabs">
<div id="text_overview_tab">Overview</div>
</li>
<li id="collar_tab" class="maintabs">
<div id="text_collar_tab">Collar/ Neckline</div>
</li>
<li class="maintabs" id="body_tab">
<div id="text_body_tab" >Body</div>
</li>
<li id="sleeves_tab" class="maintabs">
<div id="text_sleeves_tab" >Sleeves</div>
</li>
</ul>
</div>
</div>
CSS CODE:
html {
height: 100%;
}
body#container {
position: relative;
width: 100%
min-width: 1280px;
height: 100%;
min-height: 700px;
background-color: rgba(255,255,255,0.8);
margin: 0 auto;
}
#menu_bars {
position: relative;
width: 90%;
height: 20%;
margin: 0 auto;
}
#main_bar {
float: left;
width: 78%;
height: 100%;
}
#main_bar ul {
float: left;
display: table;
width: 100%;
height: 100%;
border-radius: 6px;
vertical-align: middle;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.maintabs {
display: table-cell;
width: 25%;
height: 100%;
list-style-type: none;
cursor: pointer;
vertical-align: middle;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(237,237,237))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* W3C */
}
.maintabs:first-child {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px; }
.maintabs:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.maintabs div {
display: table-cell;
height: 100%;
color: rgb(125,125,125);
font-size: 0.8em;
text-decoration: none;
text-shadow: 0px 1px 2px rgba(150,150,150,0.4);
-moz-transition: all 0.3s ease-in;
-webkit-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
#overview_tab div{
color: rgb(142,101,143);
text-shadow: 0px 1px 1px rgba(248,248,248,1);
}
.maintabs div:hover {
color: rgb(153,112,154);
text-shadow: 1px 1px 0 rgba(255,255,255,0.95);
}