css - Center Div Tags in another Div Tag -

i'm trying parent div tag hold n children div tags such on same line, yet grouped in center. example:

here children blue, , parent red.

here things i've tried:

• making blue divs display:inline them on same line. problems: doesn't display width , height both set 10px.i tried adding  , couple pixels wide.
• making blue divs float:left. problems: have programmatically resize red parent child contents since divs floated , center in parent want. there should solution doesn't involve javascript.

<style> .container {   width: 100%;   padding: 0;   text-align: center;   border: 1px solid red; }  .inner {   display: inline-block;   margin: 0 5px;   border: 1px solid blue; } </style>  <div class="container">   <div class="inner">     1   </div>   <div class="inner">     2   </div>   <div class="inner">     3   </div> </div>