Div not centering as expected

Question

I'm trying to center the inner divs by setting the margins on the outer div, but it does not appear to be working.

So my HTML looks like this:

<div id="outer">
<div class="inner"><span>H</span></div>
<div class="inner"><span>I</span></div>
</div>

My CSS looks something like this:

#outer {
  display: block;
  width: 100%;
  margin: 0 auto; /* This is not working for some reason */
}

#outer .inner {
  display: inline-block; /* Used to put the boxes side by side */
  margin: 0 0 0 1%;
  width: 5%;
}

I can't figured out what is wrong with my CSS code. Even if I set a fixed width, it still won't center.

Answer 1

Just use text-align: center css property in your #outer div to center .inner divs (as they are displayed as 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>