пытаясь сделать простое выравнивание по горизонтали в центре

Question

Я пытаюсь 4 горизонтальных divs в коробке, но они не выравниваются. Предположим, я хочу добавить 4, 5, 6 или 7 маленьких коробок горизонтально даже, как бы я это сделал? Это мой код HTML и CSS ниже. Первые 3 выравниваются хорошо, но когда я добавляю другие, он просто помещает их в другие места

и это моя ссылка в случае. Сво один весь путь в нижней

http://codepen.io/willc86/pen/hpFLe

#box2{ 
    border: 3px solid green; 
    margin: 40px; 
    text-align: center; 
} 

#left1{ 
    border: 1px solid green; float: left; margin-left: 30px; 
} 


#right1{ 
border: 1px solid red; float: right; margin-right: 30px; 
} 

#middle1{ 
border: 1px solid tan; margin: auto; width: 50px; 

} 

#middlerightbox{ 
border: 1px solid blue; margin: auto; width: 50px; 

} 




     <div id="box2"> 
     <div id="margin"> 
      <div id="left1"> 
       hello 
      </div> 

      <div id="right1"> 
       hello 
      </div> 

      <div id="middle1"> 
       hello 
      </div> 

      <div id="middlerightbox"> 
       hello 
      </div> 

     <div class="clear"> 
     </div> 
     </div> 

Answer 1

Я думаю, что это то, что вы хотите:

#box2 { 
border: 3px solid green; 
margin: 40px; 
height: 20px; // necessary! 
text-align: center; 
} 

#left1 { 
border: 1px solid green; float: left; 
} 


#right1 { 
border: 1px solid red; float: left; 
} 

#middle1 { 
border: 1px solid tan; float: left; margin: auto; 
} 

#middlerightbox { 
border: 1px solid blue; float: left; margin: auto; 
} 

<div id="box2"> 
<div id="margin"> 
<div id="left1">hello</div> 
<div id="right1">hello</div> 
<div id="middle1">hello</div> 

<div id="middlerightbox">hello</div> 

<div class="clear"> </div> 
</div> 

Запросить дополнительную помощь, если это необходимо!