css - Horizontally center fluid div containing elements set to float left -

i've centred inner div in parent div elements contained in inner div not horizontally in line.

for approach see demo.

i'm aware of 2 common apprroaches centering div in div i.e. using html below:

html:

<div id="outer" style="width:100%">   <div id="inner">foo foo</div>

centering method 1:

#inner {     width: 50%;     margin: 0 auto; }

centering method 2:

#outer {     text-align: center; }  #inner {     display: inline-block; }

correct me if i'm wrong but:

method 1 seems suitable if inner div have set width.
method 2 seems suitable if width of inner div fluid , contains 1 element multiple elements aren't horizontally in line.

edit:

what describe in method 2 above issue i'm having i.e. rather outcome seen in demo i'm trying achieve.

                            <<  <  march - 2016  >  >>

i'm looking best way remedy whilst making sure width of centred div dynamic.

simply align inner elements did outer ones? what's issue?

#calendarmonthcontrols > div, #calendarmonthcontrols > {     display: inline-block; }

Unity