Given that the top element is absolutely positioned, you could do the same with the second element and set top:100%
in order prevent the elements from overlapping.
#map-section {
width: 100%;
position: absolute;
height: 800px;
top: 100%;
background-color: black;
}
As an alternative, an arguably better approach allowing you to avoid having to absolutely position both elements would be to simply set a height of 100%
on the html
/body
elements.