title: Centering multiple side-by-side divs
body: <p>I am trying to make multiple divs, specifically five and center them all. I have used the <code>display:inline-block</code> to get them to be side by side but then when I use <code>margin: 0 auto</code>, the <code>display:inline-block</code> seems to get negated and then it's a vertical strip going down the page. </p>
  
  <p>Below is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div id="red"&gt;&lt;/div&gt;
    &lt;div id="orange"&gt;&lt;/div&gt;
    &lt;div id="yellow"&gt;&lt;/div&gt;
    &lt;div id="green"&gt;&lt;/div&gt;
    &lt;div id="blue"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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. </p>
  
  <p>Can someone point me in the right direction? </p>