CODEWITHSUNDEEP
htmltwitter-bootstrapcsstwitter-bootstrap-3
Floy Rodd
Floy Rodd

Reputation: 111

My containers keep overlapping each other

I created the following with bootstrap:

enter image description here

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:

enter image description 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.

Upvotes: 2

Views: 509

Answers (1)

Emirhan &#214;zlen
Emirhan &#214;zlen

Reputation: 484

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;
}

Upvotes: 1

Related Questions