Item moving around when window resized - html

Question

See Umbrella image in images:
Full-size window:
.
Reduced (ideal placement):
I would like to have my umbrella image in the centre of the screen no matter the size of the window.
It works from the point where the window shrinks and works in mobile view too.
I've tried various methods but it doesn't seem to be working, any tips would be greatly appreciated.
Here is my code:
HTML
<div class="wrapper">
<div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
</div>
</div>
CSS
.page2{
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
//cards
.wrap{
width:960px;
margin:auto;
margin-top: 100px;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float:left;
margin:10px;
text-decoration: none;
}
.page3{
margin: 20px;
margin-top: 20px;
height: 30%;
}
.umbrella_icon {
text-align: center;
}
.footer {
z-index: 1000;
width: 960px;
margin: 0 auto;
}

Answer 1

Use dispaly:flex to .wrap
See working code
.page2{
width: 100%;
margin: 0 auto;
margin-top: 20px;
height: 100%;
}
.wrap{
margin: auto;
margin-top: 100px;
display: flex;
}
.card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.15);
transition: 0.4s;
width: 300px;
text-align: center;
font-size: 16px;
float:left;
margin:10px;
text-decoration: none;
}
.page3{
margin: 20px;
margin-top: 20px;
height: 30%;
}
.umbrella_icon {
text-align: center;
}
.footer {
z-index: 1000;
width: 960px;
margin: 0 auto;
}
<div class="wrapper">
<div class="page2">
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png" alt="umbrella">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>
</div>
</div>

Answer 2

End The page 2 div before starting page 3 div.
Change the page3 css to
.page3{
margin: 50vh 50vw;
}
<h2>Blog</h2>
<div class="wrap">
<div class="card">
<a href="welcome.html">
<img class="card-img" src="str3.jpg">
</a>
<div class="card-text">
<h3>Welcome</h3>
<p>Website Launch and my First Project</p>
</div>
</div>
<div class="card">
<a href="blog.html">
<img class="card-img" src="steve_roe_kyoto.jpg">
</a>
<div class="card-text">
<h3> Kyoto</h3>
<p>My Recent Trip</p>
</div>
</div>
<div class="card">
<a href="best.html">
<img class="card-img" src="str4.jpg">
</a>
<div class="card-text">
<h3>Best of 2018</h3>
<p>Neon Goodness from Last Year</p>
</div>
</div>
</div>
</div>
<div class="page3">
<footer>
<div class="umbrella_icon">
<img src="umbrella-02.png" alt="umbrella Here">
</div>
<div class="logo_footer">Steve Roe</div>
<div class="footer_menu">
<ul class="ul_footer">
<li>Work With Me</li>
<li>
Contact</li>
</ul>
</div>
</footer>
</div>

Answer 3

Use flex for .wrap like this :
.wrap{
width:960px;
margin:auto;
margin-top: 100px;
display: flex;
justify-content: center;
}
this code make image in center horizontally.