レスポンシブサイトに対応させようとすると文字がおかしな場所に表示される

以下のようにタブレット端末やスマホ用に画面を小さくしても対応できるようなサイト（レスポンシブサイト）を
作っています。
下記のソースは、タブレットやスマホで表示させた場合の部分のみを記述しています。
下記のソースですと最初のmain_box要素にある「CONCEPT　コンセプト」の部分がsub_boxの要素にかぶってしまいます。

本来は背景画像（ノートパソコンの画像）の中央に文字が来てほしいのですが、背景画像からはみ出して他の要素にかぶってしまっています。

Chromeの検証機能を使って何が原因で重なっているか調べてはみたのですが、floatを使ってもいないし、paddingもおかしな数値になっていないのでどうしてこうなっているのか皆目検討がつきません。
レスポンシブサイトはまだ勉強半ばなので何か見落としているのかもしれません。

解決策などアドバイスを頂けると幸いです。

「現状」

<html> ```ここに言語を入力 <section id="main_box"> <p><span class="title_span">CONCEPT</span><br><span class="eng_title_span">コンセプト</span></p> </section> <section id="sub_box"> <div class="concept_box1"> <p class="title_p">企業様に寄り添う</p> <p class="text_p1">TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</p> </div> </section> ``` <CSS> ```ここに言語を入力 /*ビューエリアの最大幅。このサイズより小さい場合に適用*/ @media all and (max-width: 668px) {

#main_box {
height: 0;
/* 表示画像の高さ（300px) ÷ 表示画像の幅(1400px) × 100 */
padding-top: 21.42%;
background-size: contain;
background-image:url("../img/concept.jpg");
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
display: -webkit-flex;
display: flex;
margin-bottom:40px;
}

#main_box p {
text-align:center;
background-color: rgba(255,255,255,0.7);
}

#main_box .title_span {
font-size:300%;
color: #43A1E1;
font-weight:bold;
}

#main_box .eng_title_span {
font-size:150%;
font-weight:bold;
}

#sub_box {
width:100%;
}

#sub_box .concept_box1 {
width:95%;
border: 1px solid #000;
margin:auto;
margin-bottom:40px;
}

#sub_box .concept_box1 .title_p {
padding-top:10px;
padding-bottom:10px;
color:#FFF;
width:97%;
padding-left:3%;
font-size:30px;
background:linear-gradient(315deg, transparent 35px, #43A1E1 10px);
background-position: bottom left, bottom right, top right, top left;
background-repeat: no-repeat;