レスポンシブ対応に於いて、横幅の伸縮に関係なくテキストを中央に位置させたい

実現したいこと

テキストを中央に固定させしたい。

前提

レスポンシブ対応(480px以下)に於いて、「私たちについて　ー　テキストテキスト…」のテキストが横幅を伸縮させるに連れて左右に動いてしまうので、それを動かない様に直したい。

該当のソースコード

Web1.wrap_original{overflow: hidden;} NEWS ABOUT BUSINESS COMPANY contact

<main> <div class="box2"> <img src="second01.png" alt="写真２"> <div class="text3"> <div class="text3-1"> <h3 id="about">ABOUT</h3> <p><span>私たちについて</span></p> <hr> </div> <div class="text3-2"> <p>テキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキスト</p> <p>テキストテキストテキストテキストテキスト</p> </div> </div> </div> </main>

a {
color: #707070;
}

img {
width: 100%;
}

header {
max-width: 100%;
background-color: #F5F0F0;
display: flex;
justify-content: space-between;
align-items: center;
}

.header-title {
max-width: 100%;
color: #707070;
margin-right: 50px;
margin-left: 50px;
font-size: 70px;
font-family: serif
}
.text1 nav ul li a {
margin-right: 52px;
font-size: 35px;
font-family: serif;
}

button {
padding-right: 50px;
padding-left: 50px;
padding-top: 60px;
padding-bottom: 60px;
font-size: 70px;
font-family: serif;
color: #FFFFFF;
background-color: #000000;
}

ul {
display: flex;
}

li {
display: flex;
}

.box2 {
padding-top: 69px;
display: flex;
}

.box2 img {
display: block;
align-self: flex-start;
width: 800px;
}

.text3 {
margin-top: -70px;
margin-left: 112px;
}

h3 {
margin-top: 200px;
font-family: serif;
font-size: 50px;
}

.text3-1 p {
min-width: 500px;
margin-top: 12px;
font-family: serif;
font-size: 25px;
}

.text3-1 hr {
margin-top: 28.5px;
width: 75.5px;
}

.text3-2 {
margin-top: 72.5px;
font-family: serif;
font-size: 25px;
}

@media screen and (max-width:480px) {

header { display:flex; flex-flow: column; padding-bottom: 400px; } .header-title { font-size: 100px; margin-top: 20px; margin-bottom: 10px; } ul { display: grid; grid-template-columns: 50% 50%; column-gap: 3vw } li { margin-top: 10px; margin-bottom: 10px } .text1 nav ul li a { margin-right: 0; font-size: 7.3vw; } button { margin-top: 25px; margin-bottom: -300px; padding-top: 10px; padding-bottom: 10px; } .box2 { flex-direction: column } .box2 img { width: 100%; } .text3 { margin-top: -130px; margin-left: 0px; } h3 { text-align: center; } .text3 p { width: 500px; margin-top: 10px } .text3 p span { width: 7px; border-bottom: 1px solid black; padding-bottom: 30px; } .text3-1 hr { display: none; }

}### 試したこと
ググったり、こちらのサイトの過去の質問を見ても分からない。
ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

VSコード
ここにより詳細な情報を記載してください。