Aligning a div with 2 divs inside it in Center - html

Question

Currently im trying to get 2 divs to align in center, but not quite sure how to do it. They go to the Left side by default.
I had margin-left:14 % and it would align it somewhat in the center, but when you re-sized the window it would look weird because it aligned to the right side.
tried with with with marign-left/right:auto, but no result.
html
<div id="panels">
<div id="panel-left">
</div>
<div id="panel-right">
</div>
css
#panels{
padding-top:15px;
margin-left: auto;
margin-right: auto;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:white;
float:left;
padding-left:25px;
height:473px;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:white;
float:left;
padding-left:25px;
}

Answer 1

Try this:
CSS
#panels{
padding-top:15px;
text-align:center;
display: block;
}
#panel-left{
width:32%;
min-width:209px;
overflow:hidden;
background-color:black;
height:473px;
display: inline-block;
}
#panel-right{
width:32%;
min-width:209px;
height:473px;
background-color:orange;
display: inline-block;
}
DEMO HERE

Answer 2

Try this style, I have used the box sizing css property to take care of the inherent 1px space that occurs during inline styling.
Fiddle here
Of course there was an un-closed div element in your initial code which is fixed now.
So the CSS looks like,
#panels {
padding-top:15px;
margin: 0 auto;
background: cyan;
width:50%; /* u need this */
height:500px;
}
#panel-left {
width:50%;
box-sizing:border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow:hidden;
background-color:gray;
float:left;
padding-left:25px;
height:473px;
border:1px solid #000;
}
#panel-right {
width:50%;
box-sizing:border-box;
/*min-width:209px;*/
height:473px;
background-color:white;
float:left;
padding-left:25px;
border:1px solid #000;
}
Code snippet::
#panels {
padding-top: 15px;
margin: 0 auto;
background: cyan;
width: 50%;
/* u need this */
height: 500px;
}
#panel-left {
width: 50%;
box-sizing: border-box;
/* min-width:209px; By doing this you are pretty much giving the width to be 100 % */
overflow: hidden;
background-color: gray;
float: left;
padding-left: 25px;
height: 473px;
border: 1px solid #000;
}
#panel-right {
width: 50%;
box-sizing: border-box;
/*min-width:209px;*/
height: 473px;
background-color: white;
float: left;
padding-left: 25px;
border: 1px solid #000;
}
<div id="panels">
<div id="panel-left">left</div>
<div id="panel-right">right</div>
</div>
Hope this helps. Happy Coding :)