How to responsively close whitespace gap between two <div>'s?

Based upon the screen size, the whitespace increases/decreases between the image and blog title:

How can I make them touch at all times?

HTML

<img class="main-image" src="/assets/walking.jpg">
<div class="overlay-image">
  <div class="blog-caption">
    A DAILY BLOG ABOUT THE
    JOURNEY & CHALLENGES
  </div>
  <%= render 'subscribes/subscribe.html.erb' %>
</div>

<div class="blog-page">
  Blog post title & text.
</div>

css

main-image {
  width: 100%;
  position: relative;
}

.overlay-image {
  position: relative;
  text-align: center;
  margin-top: -47%; # I think this is the main culprit, but I don't know how to edit without altering the position of the things on the image
  height: 201px;
}

.blog-caption {
  text-align: center;
  font-size: 18px;
  color: white;
  margin-top: 0px;
  margin-bottom: 18px;
  padding-top: 8px;
  background-color: rgba(44,62,80, 0.8);
  padding-bottom: 8px;
}

.blog-page {
  @media (max-width: 992px) {
    padding-top: 0px;
    margin-top: -40px;
  }
}