Hello i wondered how i would be able to center divs together horizontal, so far i've used margin: 0 auto; to put them in the middle, but the divs go right under each other instead of next to each other. Any ideas on how to fix that?

Here's a 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 you see they are on top of each other, i would like to know how to make them stand next to each other.