Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Tatiana Frambach
Tatiana Frambach
7,791 Points

my bootstrap container is on top of the other

I'm developing a homepage that has, so far, 2 bootstrap containers. What happens is, the second one is appearing on top of the first, instead of after it. What am I doing wrong here?

   <!-- hero cover -->
<div class="container-fluid hero-cover">

  <img src="images/cover-odonto.jpg" class="img-responsive">

  <div class="row">
    <div class="col-md-12 cover-text">
        <h1>Some Text</h1>
        <h3> Some secondary text</h3>
    </div> <!-- / col -->
  </div>  <!-- / row -->

    <!-- pricing tables -->
    <div class="row">
          <div class="col-md-5 col-sm-6">
            <ul class="price">
              <li></li>
              <li></li>
              <li></li>            
            </ul>
          </div> <!-- / col -->

          <div class="col-md-5 col-sm-6">
            <ul class="price">
              <li></li>
              <li></li>
              <li></li>              
            </ul>
          </div> <!-- / col -->
    </div><!-- / row -->

 </div> <!-- / container -->


<!-- beneficios -->

<div class="container beneficios-table">

  <div class="row">
    <div class="col-sm-12">
      <p><h2>Some title here</h2></p>
    </div> <!-- / col -->
  </div> <!-- / row -->

  <div class="row">
    <div class="col-sm-12">
      <p><h3>Another Title</h3></p>
      <p><h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</h4></p>
    </div> <!-- / col -->
  </div> <!-- / row -->

</div> <!-- / container -->

Thanks in advance.

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points
Chyno Deluxe
Chyno Deluxe
16,936 Points

Hi Tatiana, can you provide us with your CSS as well so that we can see what is happening in the CSS as well.

Tatiana Frambach
Tatiana Frambach
7,791 Points

There you go. :)

/* Nav --------------------- */
.logo-odonto {
    max-width: 200px;
}


.navbar-header {
    height: 100px;
}


/* Cover --------------------- */

.hero-cover {
    position: relative;
} 

.cover-text {
    position: absolute;
    z-index: 1;
    top: 10%;
    left: 6%;
}

.text-white {
    color: #ffffff;
}


/* Pricing --------------------- */



/* Style the list */
.price {
    list-style-type: none;
    border: 1px solid #eee;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    background-color: white;
    position: absolute;
    right: 5px;
    left: 5px;
    top: -100px;

}

/* Add shadows on hover */
.price:hover {
    box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

/* Pricing header */
.price .price-header {
    background-color: orange;
    color: white;
    font-size: 25px;
}

/* List items */
.price li {
    border-bottom: 1px solid #eee;
    padding: 20px;
    text-align: center;
}


/* The "Sign Up" button */
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    font-size: 18px;
}




/* Beneficios  --------------------- */

.beneficios-table {
    background-color: white;
    padding: 10rem;
    position: relative;
}
Tatiana Frambach
Tatiana Frambach
7,791 Points
Tatiana Frambach
Tatiana Frambach
7,791 Points

can anyone help me here?