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>™</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>