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