title: Centering Horizontal divs inside the outer Div?
body: <p>I'm creating a horizontal menu bar.</p>
  
  <p>There is an outer div that contains inner divs (each of these divs is the individual menu item).</p>
  
  <p>I use <code>float: left</code> for styling on these inner divs to display them horizontally instead of vertically. </p>
  
  <p>The problem is that the menu bar has uneven space on the left and right, hence the overall menu bar  doesn't appear to be centralized... i.e the first menu item on left has lesser space from left border and the space between last menu item on right and the right border is more.</p>
  
  <p>I want equal margin/padding on the left and right to make the menu bar display in center.</p>
  
  <p>I tried setting <code>margin-left: auto; margin-right: auto</code> on the outer div and then on the inner div as well. Both don't seem to help.</p>
  
  <p>Already had a look here:  <a href="https://stackoverflow.com/questions/114543/how-to-center-div-in-div">How to horizontally center a &lt;div&gt; in another &lt;div&gt;?</a>  </p>
  
  <p>However this particular answer is to center just one div, what I have is a collection of horizontal divs (menu items) that need to be centralized.</p>
  
  <p>Any help is appreciated. </p>