文字正在推动下面的DIV

Question

我的文字正在推送包含它们的div元素。

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>

图像显示DIV顶部的文字，而不是在其中。

example

我试图弄乱浮子和内联块，但没有任何影响它。不知道如何解决它。