Text is pushing DIV below - html

Question

My text is pushing div element that contains them below.
slidepassos{
position: relative;
height: 100vh;
width: 100%;
background: rgba(0,0,0,1);
float: left;
margin-top: -1px;
}
#anchorHow{
margin-top: 65px;
width: 100%;
float: left;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.passo-um{
height: 100vh;
width: 100%;
background: #000101;
}
.passoumback{
height: 100%;
width: 100%;
background-image: url("../img/passoumu.jpg");
background-position: top center;
}
.passoumgrad{
height: 100vh;
width: 100%;
background: rgba(0,37,63,0.7);
}
.passo-um h1{
color: white;
font-weight: bold;
font-size: 45px;
text-align: center;
}
.passo-um h2{
color: #EBAC00;
font-weight: bolder;
font-size: 53px;
text-align: center;
margin-top: 15px;
margin-left: 35%;
}
.passo-um p{
color: white;
padding: 18px 8%;
font-size: 20px;
font-weight: lighter;
text-align: center;
margin-top: 23px;
float: left;
}
.passoumilu {
width: 300px;
float: left;
margin-left: 9%;
margin-top: 50px;
}
.swipeleftcontent{
z-index: 1;
background-size: 60px 60px;
margin-left: 157px;
width: 60px;
height: 60px;
position: absolute;
bottom: 14%;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<div class="passoumback">
<div class="passoumgrad"></div>
</div>
<img src="img/swipeleft.png" class="swipeleftcontent">
</div>
</div>
</div>
</div>
image showing the text on top of the DIV instead inside it.
example
Ive tried to mess with the floats, and inline-blocks, but nothing affects it. Dont know how to fix it.