Bootstrap rows overlapping - html

Question

I am trying to make a page that has two sections that stack on top of each other using rows. Each section is supposed to be the height of the browser window but for some reason the second row overlaps most of the first except for the header.
Here is a link to my code:
http://www.bootply.com/WwcepyZC01

Answer 1

If I understand your question correctly, you can do this using height: 100vh, and remove the position: absolute. I've also restructured your HTML a bit so that .layer2 is not a child of .layer1.
.layer1 {
width: 100%;
height: 100vh;
background-image: url(<%=asset_path "home_bg.jpg"%>);
background-size: cover;
background-color: purple;
}
.title-wide h1 {
top: 10%;
left: 10%;
right: 10%;
color: #ffffff;
font-size: 10vmax;
}
.home-caption {
position: absolute;
left: 20%;
right: 20%;
top: 30%;
}
.title-wide h2 {
color: #ffffff;
font-size: 4vmax;
}
.col-md-7 {
position: absolute;
text-align: center;
left: 15%;
right: 15%;
height: 100%;
top: 50%;
font-size: 10vw;
}
.btn-default {
background: rgba(255, 255, 255, 0.8);
}
.title-wide {
left: 90%;
right: 90%;
}
.btn-xlarge {
padding: 20px 20px;
font-weight: 700;
line-height: normal;
border-radius: 200px;
border: 2px solid none;
text-align: center center;
height: 3em;
font-size: 25px;
width: 10em;
}
.layer2 {
width: 100%;
height: 100vh;
background-size: cover;
background-color: green;
}
<div class="layer1 row-fluid">
<div class="title-wide text-center">
<h1>My Name</h1>
<div class="home-caption text-center">
<h2>I am a person working for a nameless corporation</h2>
<div class="row">
<hr>
<div class="offset4">
</div>
</div>
</div>
</div>
</div>
<div class="layer2 row-fluid">
</div>
<div id="push"></div>