Div should not be over Div with background image with divs inside - css

Question

Div should not be over Div with background image with divs inside, but for some reason the about div is displayed over the nav:
body {
margin: 0;
padding: 0;
/*background-color: blue;*/
}
.divider {
background-color: #be2b27;
width: 100%;
height: 100px;
position: absolute;
display: block;
padding: 0;
}
.divider h1 {
font-family: "Nexa Light";
font-size: 2em;
color: white;
text-align:left;
padding-left: 10px;
}
.lorem-text {
font-family: "Menlo";
font-size: 1.2em;
color: white;
}
.start-section {
margin-top: 30px;
/* position: absolute; */
padding-left: 20px;
padding-top: 20px;
}
#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
#home-head {
font-family: 'Nexa Light';
/* font-size: ; */
padding-top: 30px;
color: white;
}
.nav { }
<div id="start-bg">
<!--<div class="nav"...>...</div>-->
<div class="start-section">
<h1 id="home-head">Landing Page</h1>
<p class="lorem-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare est in maximus vestibulum.
Mauris eu tincidunt quam.<br> In commodo neque id tortor mattis, non consectetur ante tincidunt.
Nunc ultrices ultricies purus, id finibus justo eleifend sit amet.<br>
Sed in iaculis libero, et gravida nibh.
Proin mollis, nibh eu rhoncus scelerisque, orci ex posuere mi, id pharetra purus est suscipit sapien.
Aliquam fermentum dignissim ultricies. Cras vitae neque tincidunt, tristique neque at, ornare leo.<br>
Integer gravida lectus sed venenatis auctor. Vestibulum sed ligula eget dui ultrices luctus.<br>
Etiam dapibus auctor sollicitudin. Nam vel dui non lorem semper scelerisque. Donec sed condimentum mauris.
Maecenas ac enim sit amet orci sodales porta.
</p>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150">
<img src="http://via.placeholder.com/350x150"><br>
</div>
</div>
<div class="divider">
<h1>About</h1>
</div>
There must be something wrong with the positions or something or the fact that when the div has a background image it is not registered as holding any content so the about div is displayed above it.
What do I need to do?
I want the div to be displayed after the background image ends and stays there when I remove the images. If you need the nav html and css code i will give it to you.

Answer 1

#start-bg {
background-image: url(water.jpg);
background-color:#9abee1;
background-repeat: round;
height:100%;
position: absolute;
}
If you remove:
position: absolute;
Red bar go to bottom bottom of the page.