HTML の実装について

Question

<h2 class="topic2">Contents</h2> <div class="contents_box1"> <img src="images/contents1.png" class="box1_image"> <div class="contents_text1"> <h3 class="contents_topic1">ABOUT US</h3> <div class="contents_message1">「ROPE」(なわとび)を通して、「PEACE」(平和な<br>世界)を創っていきたいという想いから、「ROPE」と<br>「PEACE」を掛け合わせた「ROPEACE」という造語が<br>生まれ、活動はネパールの大震災があった翌年の2016<br>年にROPEACE PROJECTが設立され始動しました。</div> </div> </div> <div class="contents_box2"> <div class="contents_text2"> <h3 class="contents_topic2">JOIN US</h3> <div class="contents_message2">なわとびを子供たちに届けるために、様々な形で<br>ROPEACE PROJECTに参加することができます。なわ<br>とびを寄贈やクラウドファンディングやグッズ購入とい<br>う形で支援できます。個人、企業、学校など幅広い参<br>加が支援を広げています。</div> </div>

.topic2 {
font-size: 25px;
font-weight: bold;
text-align: center;
margin-top: 50px;
border-bottom: 1px solid red;
border-width: medium;
width: 120px;
margin: 40px auto;
}

.contents_box1 {
display: flex;
}

.box1_image {
margin-left: 140px;
border-radius: 10px;
}

.contents_text1 {
box-shadow: 1px 1px silver;
border-top: 1px solid #E6E6E6;
border-bottom: 1px solid silver;
}

.contents_topic1 {
font-size: 20px;
font-weight: bold;
margin-top: 50px;
margin-left: 20px;
}
.contents_message1 {
font-size: 20px;
margin-top: 20px;
margin-left: 20px;
}

.contents_box2 {
display: flex;
}

.contents_text2 {
margin-top: 30px;
margin-left: 160px;
box-shadow: 1px 1px silver;
border-top: 1px solid #E6E6E6;
border-left: 1px solid #E6E6E6;
border-bottom: 1px solid silver;
}

.contents_topic2 {
font-size: 20px;
font-weight: bold;
margin-top: 40px;
margin-left: 20px;
}

.contents_message2 {
font-size: 20px;
margin-top: 20px;
margin-left: 20px;
}

.box2_image {
margin-top: 30px;

border-radius: 10px;

}

HTMLで作成したのですが、pcの画面を縮小するとビュー崩れが起きてしまいます。
どなたか解決策をお分かりの方いましたらご教授お願い致します。

Comments

[m.ts10806]

再現するコードを提示されないことにはなんとも言えません。
質問は編集できますので。

[Lhankor_Mhy]

期待した処理結果を書きましょう
https://teratail.com/help/question-tips#questionTips3-4-3

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

[daiki0919]

コード添付しましたので宜しくお願い致します。

[Lhankor_Mhy]

「ビュー崩れ」とは、具体的にはどういう問題が起きていますか？

表現するための言葉がわからない時は表現の仕方を工夫しましょう
https://teratail.com/help/question-tips#questionTips3-3-1

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
あと「どうしたいのか」　ゴールを明示したほうが良いかと。
「想定通りになってない」としても「どうなったら想定通りか」を伝えないことには他者は何もできません。

[m.ts10806]

あと念のため質問タグに「CSS」も追加しておいてください。
HTMLだけで対応するものでもないと思います。

[Lhankor_Mhy]

https://ropeace.jp/

このサイトの模写ですか？
そうだとすると、「ビュー崩れ」というのはセンタリングができていないという問題でしょうか？