title: <figure> elements not lining up horizontally when div display is set to inline
body: <p>I'm trying to line up 3 images (each enclosed in its own div tag) horizontally. When I set display: inline in css, I get exactly the result I want. </p>
  
  <p>The problem is when I add a figure tag to each image (so that I can have a figcaption under each image). Now, the 3 images line up vertically, one below the other. How can I fix this?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="projectGallery"&gt;
      &lt;div class="projectContainer"&gt;
          &lt;figure&gt;
          &lt;img src="http://images.clipartpanda.com/penguin-clip-art-aiq5zAqiM.png" class="projects" class="projects"/&gt;&lt;figcaption&gt;&lt;/figcaption&gt;
          &lt;/figure&gt;
      &lt;/div&gt;
      &lt;div class="projectContainer"&gt;
          &lt;figure&gt;
          &lt;img src="http://img03.deviantart.net/c670/i/2013/086/5/2/golden_gate_bridge_by_ev_sta-d5zg113.jpg" class="projects"/&gt;&lt;figcaption&gt;&lt;/figcaption&gt;
          &lt;/figure&gt;  
      &lt;/div&gt;
      &lt;div class="projectContainer"&gt;
          &lt;figure&gt;
          &lt;img src="https://s-media-cache-ak0.pinimg.com/736x/a6/ee/6f/a6ee6f0db923eb8919803b89f37939ee.jpg" class="projects" class="projects"/&gt;&lt;figcaption&gt;&lt;/figcaption&gt;  
          &lt;/figure&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div.projectGallery {
  text-align: center;
  padding-top: 60px;
  }
  
  div.projectContainer {
  display: inline;
  margin: 20px;
  } 
  
  img.projects {
  max-width: 20%;
  height: auto;
  width: auto\9;
  border:1px solid #A1B7CC;
  }  
  </code></pre>