White Space Issue

HTML

<div class="blog-posts">
  <article class="blog-post">
    <div class="featured-image">
      <a href="#"><img src="https://via.placeholder.com/800x500"></a>
    </div>
    <div class="excerpt">
      <h1>Test Post 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique viverra leo, sed viverra nulla. Phasellus sollicitudin arcu odio, at ultricies orci consequat eget.</p>
    </div>
  </article>
  <article class="blog-post">
    <div class="featured-image">
      <a href="#"><img src="https://via.placeholder.com/800x1000"></a>
    </div>
    <div class="excerpt">
      <h1>Test Post 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique viverra leo, sed viverra nulla. Phasellus sollicitudin arcu odio, at ultricies orci consequat eget.</p>
    </div>
  </article>
  <article class="blog-post">
    <div class="featured-image">
      <a href="#"><img src="https://via.placeholder.com/800x1000"></a>
    </div>
    <div class="excerpt">
      <h1>Test Post 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tristique viverra leo, sed viverra nulla. Phasellus sollicitudin arcu odio, at ultricies orci consequat eget.</p>
    </div>
  </article>
</div>

SCSS

.blog-posts {
 max-width: 800px;
 margin:0 auto;
  .blog-post {
    border-bottom:1px solid #efefef;
    padding-bottom:50px;
    margin-bottom:50px;
    .featured-image {
      img {
        display: block;
      }
    }
    .excerpt {
      max-width:60%;
      margin:0 auto;
      background:white;
      padding:50px;
      position: relative;
      margin-top:-50px;
      z-index: 1;
      border:1px solid #eee; // So you can see where this ends
      h1 {
        margin:0;
        padding:0;
        margin-bottom:10px;
        line-height:normal;
      }
      p {
        margin:0;
        padding:0;
        line-height: 200%;
      }
    }
  }
}