Text for h3 element moves when resizing browser - html

Question

So, I am supposed to make a tribute page for an assignment and I have put some text on top of an image, the text is my h3 element. When I have the screen full size on my Macbook 13inch the text is in the correct spot I want it on the image but when I minimize the page the text completely goes off of the image and is below it. What is the issue?
.red-text {
color: red;
}
.gray-background {
background-color: #9c9fa3;
}
h1 {
font-size: 70px;
font-family: orbitron, sans-serif;
text-align: center;
position: relative;
top: 30px;
}
h2 {
font-size: 30px;
text-align: center;
}
img {
display: block;
margin: 0 auto;
}
.image {
position: relative;
width: 100%;
}
h3 {
position: absolute;
top: 265px;
left: 635px;
width: 100%;
}
h4 {
text-align: center;
font-size: 25px;
}
p {
text-align: center;
font-size: 22px;
}
footer {
text-align: center;
}
h5 {
text-align: right;
}
ul {
font-size: 17px;
}
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<div class="gray-background">
<h1 class="red-text">Nintendo</h1>
<h2>One of the world's largest video game companies</h2>
<div class="image">
<img src="https://www.goombastomp.com/wp-content/uploads/2015/12/nintendo_consoles_wallpaper_by_shadow86sk-d4w4y71-1.jpg" style="width:40%" alt="" />
<h3>Pictured above: The main Nintendo consoles</h3>
</div>
<ul>
<li><strong>1889</strong> - Founded</li>
<li><strong>1889-1956</strong> - Operated as a card company</li>
<li><strong>1955-1974</strong> - New ventures: They tried many different business ventures through these years.</li>
<li><strong>1974-1978</strong> - Early electronic era: Starting to dip their hands in to the video game relm.</li>
<li><strong>1979-2003</strong> - Success with video games: This is when they developed some of their most successful consoles and games, games that have now become standards for all their consoles.</li>
<li><strong>2004-2011</strong> - Nintendo DS and Wii: The DS was one of the first handheld systems with a touch screen capabilities. The Wii was one of Nintendos more successful consoles with it's Wii remote motion controls.</li>
<li><strong>2011-2015</strong> - Nintendo 3DS and Wii U: The 3DS was the first 3D handheld system without the use of 3D galsses. The Wii U did not sell as many units as expected.</li>
<li><strong>2015-present</strong> - Mobile and Nintendo Switch: Nintendo continues to develop mobile games and this year they released their new console the Switch. The Switch is selling very well for Nintendo and is still very hard to buy.</li>
</ul>
<p>"I think that inside every adult is the heart of a child. We just gradually convice ourselves that we have to act more like adults."</p>
<footer><cite>- Shigeru Miyamoto</cite></footer>
<h4>Check out more about Nintendo by clicking
here.</h4>
<h5>Written and coded by Preston Bayle.</h5>
</div>

Answer 1

Take a look at the CSS styles on the H3 tag in the updated code.
This keeps the text positioned on top of the image regardless of browser size. There also is a media query that reduces the font size of h3 for smaller devices.
.red-text {
color: red;
}
.gray-background {
background-color: #9c9fa3;
}
h1 {
font-size: 70px;
font-family: orbitron, sans-serif;
text-align: center;
position: relative;
top: 30px;
}
h2 {
font-size: 30px;
text-align: center;
}
img {
display: block;
margin: 0 auto;
}
.image {
position: relative;
width: 100%;
}
h3 {
position: absolute;
bottom: 5px;
left: 0;
right: 0;
text-align: center;
margin: 0;
width: 40%;
margin: 0 auto;
}
#media only screen and (max-width: 600px) {
h3 {
font-size: 14px;
}
}
h4 {
text-align: center;
font-size: 25px;
}
p {
text-align: center;
font-size: 22px;
}
footer {
text-align: center;
}
h5 {
text-align: right;
}
ul {
font-size: 17px;
}
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<div class="gray-background">
<h1 class="red-text">Nintendo</h1>
<h2>One of the world's largest video game companies</h2>
<div class="image">
<img src="https://www.goombastomp.com/wp-content/uploads/2015/12/nintendo_consoles_wallpaper_by_shadow86sk-d4w4y71-1.jpg" style="width:40%" alt="" />
<h3>Pictured above: The main Nintendo consoles</h3>
</div>
<ul>
<li><strong>1889</strong> - Founded</li>
<li><strong>1889-1956</strong> - Operated as a card company</li>
<li><strong>1955-1974</strong> - New ventures: They tried many different business ventures through these years.</li>
<li><strong>1974-1978</strong> - Early electronic era: Starting to dip their hands in to the video game relm.</li>
<li><strong>1979-2003</strong> - Success with video games: This is when they developed some of their most successful consoles and games, games that have now become standards for all their consoles.</li>
<li><strong>2004-2011</strong> - Nintendo DS and Wii: The DS was one of the first handheld systems with a touch screen capabilities. The Wii was one of Nintendos more successful consoles with it's Wii remote motion controls.</li>
<li><strong>2011-2015</strong> - Nintendo 3DS and Wii U: The 3DS was the first 3D handheld system without the use of 3D galsses. The Wii U did not sell as many units as expected.</li>
<li><strong>2015-present</strong> - Mobile and Nintendo Switch: Nintendo continues to develop mobile games and this year they released their new console the Switch. The Switch is selling very well for Nintendo and is still very hard to buy.</li>
</ul>
<p>"I think that inside every adult is the heart of a child. We just gradually convice ourselves that we have to act more like adults."</p>
<footer><cite>- Shigeru Miyamoto</cite></footer>
<h4>Check out more about Nintendo by clicking
here.</h4>
<h5>Written and coded by Preston Bayle.</h5>
</div>

Answer 2

You don't want your h3 tag to have an absolute position here - you would want to do it the same way as your other header tags.
Try this
h3 {
text-align: center;
top: 265px;
left: 635px;
width: 100%;
}