Controlling height in a container in HTML - html

Question

There is something there is controlling the height on the div div tag with the green border here:
Can anybody see in the CSS what that is through the developer tools? I cannot figure it out.
I need to make a grid there is looking like this, but the height of the green bordered div tag has been stopping me. The important thing is that the text should still be centered.
This is actually how the code should be, but the height stops that:
Here is the code there is online:
div class="background-image" #Html.Raw(topImageStyling)></div>
<div class="top-area" style="border: 4px solid red;">
<div class="container col-md-8" style="border: 4px solid green;">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl center">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
</div>

Answer 1

Per our discussion in the coments, this is how the html should be structured. Then just remove position:absolute; from .background-image and remove min-height:500px; from .container
<div class="background-image" #Html.Raw(topImageStyling)>
<div class="top-area" style="border: 4px solid red;">
<div class="container col-md-8" style="border: 4px solid green;">
#if (!string.IsNullOrEmpty(headerText))
{
if (pageAlias == "Blog")
{
<h1 class="header-xl center">
#Html.Raw(headerText)
</h1>
}
else
{
<p class="header-xl center">
#Html.Raw(headerText)
</p>
}
}
#if (CurrentPage.HasValue("imageTeaserText"))
{
<p class="sub-header center">
#Html.Raw(CurrentPage.imageTeaserText)
</p>
}
</div>
</div>
</div>