I have used bootstrap to create the following design:
https://i.sstatic.net/1yqKI.jpg
Here is the code for the design shown above:
<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;
}
However, when I tried adding a section below this screen, it seems to be overlapping as seen in the image here:
https://i.sstatic.net/e6Byt.png
The code for the conflicting "section" is as follows:
<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 overlap with the other content. I attempted to change the positioning and use margin-top, but it did not resolve the issue. I want the sections to stack vertically like building blocks instead of overlapping.