Using bootstrap to design a basic webpage, here is the picture of the page in full desktop width
https://i.sstatic.net/acTR5.jpg
I like how it fills up the entire page.
However, upon resizing Chrome to a smaller width, there seems to be white space at the bottom that I can't explain.
https://i.sstatic.net/z8uNW.jpg
To make matters worse, when I check developer tools, I notice that my html only covers my div, so why the extra space?
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
box-sizing: border-box;
}
/* SECTIONS */
section {
padding-top: 2%;
padding-bottom: 2%;
}
.main {
position: relative;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
/* bottom, image */
url(img/background.jpg);
background-size: cover;
padding-bottom: 56.25%;
background-attachment: fixed;
}
.no-padding {
padding: 0;
}
/* HEADINGS */
.welcome-area {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: white;
}
.welcome-area h1 {
font-size: 500%;
}<section class="main">
<div class="welcome-area">
<h1>Hello.</h1>
<div class="row text-center btn-main">
<button type="button" class="btn btn-primary btn-explore">EXPLORE</button>
</div>
<div class="row">
<img src="css/img/face.jpg" alt="face" class="img-responsive img-face">
</div>
</div>
</section>