Why does the gap between to divs get bigger when screen gets smaller and how do I prevent it?

Question

It seems like the more narrow the width gets the more everything gets further apart. How can I prevent this from happening?

.section1 {
  background: url("img/Rectangle 1.jpg") no-repeat center;
  background-size: 100% auto;
  padding: 300px 0;
}

.section2 {
  background: url("img/Diagnostic.jpg") no-repeat center;
  background-size: 100% auto;
  padding: 500px 0;
}

<section class="section1">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 info" align="center">
        Make Future Visible <span>&trade;</span>
      </div>

    </div>
    <div class="row">
      <div class="col-lg-12 info2" align="center">
        Real-time predictive analytics for refining equipment eliminate accidents<br> and fires, increases refinery uptime, decreases downtime and drastically<br> reduces maintenance costs.
      </div>
    </div>
  </div>
</section>


<section class="section2">

</section>

Answer 1

That is because your padding settings. When you set padding: 300px 0; it translates to:

padding-top: 300px;
padding-right: 0;
padding-bottom: 300px;
padding-left: 0;

When you resize the gap between .section1 and .section2 will be 800px (300px + 500px), padding do not auto-collapse. Try to use margin instead.

See When to use margin vs padding in CSS

Or you can set a min-height