Responsive Main Menu with variable equal width items

#main_menu {
  display: table;
  table-layout: fixed;
  width: auto;  /* auto works only if the cells are filled good. Otherwise 100% */
}

#main_menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: table-row;
}

#main_menu ul li {
  padding: 0 5px;
  margin: 0;
  display: table-cell;
  /* text-align: center; */
  /* TODO: If 100% width are not reached for the whole table try to set a width here */
}

#main_menu a,
#main_menu a:visited {
  display: block;
}

The future: Flexbox?

http://caniuse.com/#feat=flexbox

http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

Alternate Layout with divs

    <div id="main_menus_table">
      <div class="main_menus_row">
        <div class="main_menus_cell" id="main_menus_cell1">
          ...
        </div>
       
        <div class="main_menus_cell" id="main_menus_cell2">
          ...
        </div>
      </div>
    </div>

  #main_menus_table {
    display: table;
    table-layout: fixed; 
    width: 100%;
  }
 
  .main_menus_row {
    display: table-row;
  } 
 
  .main_menus_cell {
    display: table-cell;
    padding: 16px; 
    vertical-align: top;
  }