title: Unable to center an image within a div
body: <p>I'm trying to center an image within a div which is designed to take up 65% of the screen horizontally on the right. Instead of doing that however, it looks like this: 
  <img src="https://i.stack.imgur.com/hLmg9.png" alt="enter image description here"></p>
  
  <p>Not only is the image not centered, the div seems to be much more than 65% of the width (the sidebar on the left is 35%), it keeps going. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class='presskit_main_section'&gt;
          &lt;div class="presskit_image_placeholder"&gt;
             &lt;img src="images/presskit_image_placeholder.jpg" width="55%" height="" id="image_placeholder"/&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.presskit_main_section{
      float: right;
      width: 65%;
      height:100vh;
      display: inline-block;
      padding-bottom: 100%;
      margin-bottom: -100%;
  }
  
  .presskit_image_placeholder{
      width: auto;
      height: 15rem;
      margin: 0 auto;
  }
  
  #image_placeholder{
      margin: 0 auto;
  }
  </code></pre>
  
  <p><strong>EDIT:</strong> Here's a JSFiddle to make things easier, the images won't show up of course because they're local, but it should show the problem well: <a href="https://jsfiddle.net/ks2za0L7/" rel="nofollow noreferrer">https://jsfiddle.net/ks2za0L7/</a></p>