title: Inline-Block not working properly?
body: <p>I have an image with a container next to it and I am having issues getting them aligned properly. I have used <code>inline-block</code> throughout the rest of the website and had no issues with it.</p>
  
  <p>If anyone knows how I would fix this, that would be amazing.</p>
  
  <p>Here 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>.talentcontainer {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background-color: #fff;
  }
  .talentimg {
    width: 250px;
    height: 280px;
    max-width: 80%;
    text-align: center;
    display: inline-block;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    /* future proofing */
    -khtml-border-radius: 10px;
    /* for old Konqueror browsers */
    overflow: hidden;
    margin: 0 auto;
  }
  .talentcontent {
    width: 450px;
    height: auto;
    max-width: 80%;
    text-align: center;
    display: inline-block;
    background-color: #000;
    margin: 0 auto;
    min-height: 280px;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="talentcontainer"&gt;
    &lt;div class="talentimg"&gt;
      &lt;img src="http://i.gyazo.com/1d998394554d8c58d5b504ff959c3528.png"&gt;
    &lt;/div&gt;
    &lt;div class="talentcontent"&gt;
      &lt;h8&gt;NAME HERE&lt;/h8&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And h is an image of the issue that I am having:</p>
  
  <p><img src="https://i.gyazo.com/d493543538f2190d6a0ad02cef37628d.png" alt="enter image description here"></p>