html - Div not centering as expected -

i'm trying center inner divs setting margins on outer div, not appear working.

so html looks this:

<div id="outer"> <div class="inner"><span>h</span></div> <div class="inner"><span>i</span></div> </div> 

my css looks this:

#outer {   display: block;   width: 100%;   margin: 0 auto; /* not working reason */ }  #outer .inner {   display: inline-block; /* used put boxes side side */   margin: 0 0 0 1%;   width: 5%; } 

i can't figured out wrong css code. if set fixed width, still won't center.

just use text-align: center css property in #outer div center .inner divs (as displayed inline elements).

#outer { text-align:center; }  #outer .inner { display: inline-block;width: 5%; }

<div id="outer">     <div class="inner"><span>h</span></div>     <div class="inner"><span>i</span></div>  </div>