My containers keep overlapping each other - html

Question

I created the following with bootstrap:
The code for the above is this:
<div class="jumbotron cta-header">
<div class="container cta-intro-box">
<h1 class="cta-heading-text">testing testing testing </h1>
</div>
</div>
.cta-header {
z-index: 3;
position: relative;
background-size: cover;
height: 100vh;
padding: 160px 0;
top: 0;
left: 0;
width: 100%;
float: left;
}
There is supposed to be a section under that screen. But it appears to be overlapping, as seen here:
The code for the "section" that isn't supposed to be overlapping is the following:
<div class="container">
<div class="row">
<h2 class="cta-container-header">services</h2>
<div class="col-lg-4 cta-align">
<h2 class="cta-service-text">Front-End web development</h2>
<p class="cta-service-p">test paragraph</p>
</div><!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
</div>
</div>
.container {
position: absolute;
width: 1170px;
}
The container is not supposed to be under the other container like that. I want it to be under (like building blocks). My attempt was to change the positioning but that only kept it overlapping. I tried doing margin-top, but that is not really a solution to not make it overlap.

Answer 1

You are making it to be like that. Can you please explain why did you use properties such as absolute and float on some cases? Maybe we would find a better solution for that.
Working fiddle
<div class="jumbotron cta-header">
<div class="container cta-intro-box">
<h1 class="cta-heading-text">testing testing testing </h1>
</div>
</div>
<div class="container">
<div class="row">
<h2 class="cta-container-header">services</h2>
<div class="col-lg-4 cta-align">
<h2 class="cta-service-text">Front-End web development</h2>
<p class="cta-service-p">test paragraph</p>
</div><!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
<!-- /.col-lg-4 -->
</div>
</div>
.container {
width: 1170px;
}
.cta-header {
background-size: cover;
height: 100vh;
padding: 160px 0;
}