title: Centering inline-block images
body: <p>I want to center a div of inline-block images.
  This is the relevant HTML:</p>
  
  <pre><code>&lt;div class = "row"&gt;
          &lt;div class = "icon"&gt; &lt;img src = "icon.PNG" alt="Some of the interesting stuff I've worked on."&gt; &lt;/div&gt;
          &lt;div class = "icon"&gt; &lt;img src = "icon.PNG" alt="My past experiences."&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>.row{
     display: block;
  }
  .icon{
     margin: 0 auto;
  }
  </code></pre>
  
  <p>the result is supposed to be the icons side-by-side and centered horizontally. Right now they are centered horizontally but they are all underneath eachother.</p>
  
  <p>Help is greatly appreciated, I'm new to web development.</p>
  
  <p>Thanks. </p>