div content shifts to left as screen size gets reduced - html

Question

I've provided the html and css. The is modified by the script.js file which is why it's empty. I want the text to appear at the center even when screen width is reduced. Please help.
HTML:
<section id="page1">
<div class="welcome">
<div class="box">
<img class="mypic" src="img/me.jpg" alt="" srcset="" />
<h1 id="welcomeText1"></h1>
</div>
</div>
</section>
CSS:
#page1, #page2, #page3, #page4 {
min-height: 100vh;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 2rem;
margin-left: 2rem;
}
.mypic {
width: 15rem;
height: 15rem;
border-radius: 500px;
}
I've provided screenshots below.
Absolute beginner here. =)
At normal width
On decreasing width

Answer 1

When you do justify-content: center; it will only align the div/element which is the child of your flexbox.
But to align the text/content in that particular element you need to use text-align: center;

Answer 2

If I correctly understand, you just need to add CSS property to welcomeText1:
#page1, #page2, #page3, #page4 {
min-height: 100vh;
}
.box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 2rem;
margin-left: 2rem;
}
.mypic {
width: 15rem;
height: 15rem;
border-radius: 500px;
}
#welcomeText1{
text-align: center;
border: 3px solid green;
}
<section id="page1">
<div class="welcome">
<div class="box">
<img class="mypic" src="img/me.jpg" alt="" srcset="" />
<h1 id="welcomeText1">Welcome to stackoverflow <br> Welcome</h1>
</div>
</div>
</section>
(I had you a border to show you)

Answer 3

You can use text-align: center for the text.
#welcomeText1 {
text-align: center;
}
Or if you want to keep the text in that structure, you could decrease the font size when using small screens with media queries.
#welcomeText1 {
font-size: 1.4rem;
}
#media (max-width: 720px) {
#welcomeText1 {
font-size: 1.2rem;
}
}