css - Centering a couple of divs together horizontal -

hello wondered how able center divs horizontal, far i've used margin: 0 auto; put them in middle, divs go right under each other instead of next each other. ideas on how fix that?

here's codepen: http://codepen.io/anon/pen/kdmmpo

html:

<section id="rating-box">    <div class="rating"></div>    <div class="rating"></div>    <div class="rating"></div>    <div class="rating"></div>    <div class="rating"></div>    <div class="rating"></div> </section> 

css:

#rating-box {     width: 100%;     margin: 20px 0 20px 0; }   #rating-box .rating {     width: 35px;     height: 35px;     background-color: #7a7a7a;     margin: 0 auto; }  

as see on top of each other, know how make them stand next each other.

you can use display: inline-block child elements , text-align: center parent:

#rating-box {    width: 100%;    margin: 20px 0 20px 0;    text-align: center;  }  #rating-box .rating {    width: 35px;    height: 35px;    background-color: #7a7a7a;    display: inline-block;  }

<section id="rating-box">    <div class="rating"></div>    <div class="rating"></div>    <div class="rating"></div>    <div class="rating"></div>    <div class="rating"></div>    <div class="rating"></div>  </section>