Why is my text position aligning to the viewport - html

Question

I'm trying to align y text to a project, but whenever I do, the text aligns to the viewport. Whenever I try aligning the text, the text moves with the viewport vertically.
header {
height: 900px;
background-image: url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type {
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
position: relative;
top: 62px;
right: 13px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
position: relative;
top: 90px;
}
.Phone {
text-align: center;
position: relative;
top: -567px;
}
.Down-Arrow {
text-align: center;
position: relative;
top: -574px;
}
<.content-alt {
float: left;
margin: -600px 1800px
}
> .content-alt2 {
display: none
}
.content {
display: none
}
.content2 {
display: none
}
.alternate {
display: none
}
.other {
text-align: center;
}
.near-bottom {
text-align: center;
}
footer {
word-spacing: 30px;
}
.footer {
font: 16px HelveticaNeue, sans-serif;
font-weight: 400;
}
.Image {
text-align: center;
}
<header>
<h1> <img style="vertical-align:middle" src="img/focus.png"/><span>Focus</span></h1>
<p>A landing page for your app with focus</p>
</header>
<div class="Phone">
<img src="img/iphone.png" />
</div>
<div class="content-alt">
<h2>Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="content">
<h2>Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="content-alt">
<h2>Another Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="content">
<h2>Another Great Feature</h2>
<div>Lorem ipsum dolor sit amet, consectetur
<br> adipiscing elit. Mauris interdum velit vitae
<br> nulla molestie eu. </div>
</div>
<div class="alternate">
<h2>Get The App Today!</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse fringilla fringilla nisl congue congue. Maecenas nec condimentum libero, at elementum mauris. Phasellus eget nisi dapibus, ultricies nisl at, hendrerit risusuis ornare luctus id
sollicitudin ante lobortis at.</div>
</div>
<div class="other">
<h3>“Focus is an app that is extremely useful. I would reccomend it to anyone.”</h3>
<div>Kyle Turner, Blogger</div>
</div>
<div class="Image">
<img src="img/people.png" />
</div>
<div class="near-bottom">
<h4>Say Hi & Get in Touch</h4>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit suspendisse.</div>
</div>
<footer>
<p>Contact Download Press Email Support</p>
</footer>
Any troubleshooting would be appreciated.

Answer 1

That's because you have the paragraph element set to position: relative. In this case, relative to the viewport. Get rid of that. You shouldn't be using relative positioning unless y absolutely required.

Answer 2

If you are trying to set the text to "vertical-align: middle" you should give it the display property: "display:table-cell" and its parent element the display property: "display:inline-table". That way your vertical align property will work without problems.

Answer 3

Here is a working example with floating elements for responsiveness on the page, hope that helps!
header{
height:250px;
background-image:url('../img/large-banner-image.png');
background-repeat: no-repeat;
background-position: center top;
}
span {
font: 60px Pacifico, sans-serif;
font-weight: 400;
}
.Header-Type{
vertical-align: -16px
}
img {
display: inline-block;
margin: 17px;
}
h1 {
text-align: center;
margin-top:60px;
}
h2 {
font: 22px Raleway, sans-serif;
font-weight: 700;
}
p {
font: 36px Raleway, sans-serif;
font-weight: 300;
text-align: center;
}
.content-alt {
text-align:left;
float:left;
width:20%;
margin-left:20%;
}
.content-alt2 {
text-align:left;
float:left;
width:20%;
margin-left:20%;
margin-top:60px;
}
.content-alt2::before{
clear:both;
}
.content {
text-align:left;
float:left;
width:20%;
margin-left:20%;
}
.content2 {
text-align:left;
float:left;
width:20%;
margin-left:20%;
margin-top:60px;
}