so im learning on codeacademy and im almost done, im learning css and html and im about 90% done as said
im working on my new website and whenever i resize the page
this stuff happens:

the text is supposed to stay aligned to the center of the image like this:

so when you scroll it doesnt come right with you
i have a updated version of the current script for it
heres the stylesheets.css file for the index page:
h1 {
font-family:impact;
color:white;
text-align: center;
}
p {
position:relative;
font-family:monospace;
font-size: 15px;
color:white;
text-align: center;
}
body {
background-image: url(bg.png);
background-repeat: no-repeat;
}
div {
font-family:impact;
margin: auto;
text-align: center;
border-radius: 3px;
border-style: solid:
height:70px;
width:140px;
background-color:lightcoral;
border: solid 1px darkred;
}
.youtube {
font-size: 15px;
text-decoration:none;
color:whitesmoke;
}
Here is the HTML page as of now
<DOCTYPE html>
<head><link rel=stylesheet href="stylesheet.css" type="text/css"/></head>
<h1>Maxx's Datahub</h1>
<p class="intro">Hello and welcome to my datahub!</p>
<p class="intro">I am currently using this as a storage for files and information.</font></p>
<div><a class="youtube" href="http://www.youtube.com/user/Thebigmaxx">YouTube Channel</a></div>
<p><a href="Videos/videos.html">Videos on Datahub</a></p>
<p><a href="Files/Files.html">Files</a></p>
</body>
</html>
if someone with good experience with CSS and HTML could help me out and possibly point out a few errors i need to fix, that'd be wonderful!
but yeah i have not found a fix for this and im really desperate :(
i've been fiddling around with this for a few hours and i can't find a solution, i'll check when i get home later