How to center three divs horizontally within a parent div?
<p>I know this question has been frequently asked but I can never seem to get it to work. Can you tell me what's wrong?</p>

<p>I have three divs within a #container div, which I want to centre side by side. The #container is 1000px wide (I want to keep it that way). Here is my code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
  margin-top: 500px;
  position: absolute;
  width: 1000px;
}
.related-article {
  background-color: #D6A400;
  display: inline-block;
  width: 230px;
  height: 300px;
  border-radius: 30px;
  margin-bottom: 0px;
}
.related-article &gt; img {
  width: 200px;
  height: 150px;
  border-radius: 15px;
  margin-top: 15px;
}
.related-article &gt; h3 {
  font-size: 15px;
  width: 180px;
  text-align: justify;
  margin-left: auto;
  margin-right: auto;
  color: #f1f1f1;
  font-family: Abel, serif;
  margin-bottom: none;
}
a {
  text-decoration: none;
}
#right {
  float: right;
}
#left {
  float: left;
}
#center {
  margin-left: 385px;
  margin-right: 385px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
  &lt;h2&gt;Here's what you'll do!&lt;/h2&gt;
  &lt;div id="left"&gt;
    &lt;a href="#" class="related-article first" align="middle"&gt;
      &lt;img src="download.jpeg" alt="T-rex"&gt;
      &lt;h3&gt;Constructing amazing fossils you never even dreamed of&lt;/h3&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="center"&gt;
    &lt;a href="#" class="related-article second" align="middle"&gt;
      &lt;img src="fossil-fish-10-lg.jpg" alt="Fish"&gt;
      &lt;h3&gt;Studying ancient marine biology&lt;/h3&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="right"&gt;
    &lt;a href="#" class="related-article third" align="middle"&gt;
      &lt;img src="fossil.turtle2.jpg" alt="Turtle"&gt;
      &lt;h3&gt;Uncovering the world's greatest mysteries&lt;/h3&gt;
    &lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>All help would be gladly appreciated.</p>