I am trying to make multiple divs, specifically five and center them all. I have used the `display:inline-block` to get them to be side by side but then when I use `margin: 0 auto`, the `display:inline-block` seems to get negated and then it's a vertical strip going down the page. 

Below is my code: 

```css
div {
  width: 50px;
  height: 300px;
  border-radius: 0;
  display: inline-block;
}
#red {
  background-color: red;
}
#orange {
  background-color: orange;
}
#yellow {
  background-color: yellow;
}
#green {
  background-color: green;
}
#blue {
  background-color: blue;
}
```

```html
<div class="container">
  <div id="red"></div>
  <div id="orange"></div>
  <div id="yellow"></div>
  <div id="green"></div>
  <div id="blue"></div>
</div>
```

I tried looking at the other relevant posts on SO but they don't do it with as many divs or they use static positioning which I don't want to use. 

Can someone point me in the right direction?