左に画像、右にテキストを配置しつつレイアウトを整えたい

前提

HTML/CSSを学習中です。
現在、実践演習中で模写コーディングを行っています。
↓イメージの様なLPを目指しています。

###実現したいこと
↓イメージの赤枠で囲まれた部分の様に、
左：画像、右：テキスト　を配置しつつ、
左画像、右テキストを共に中央に寄せて配置したいのですが、画像が左寄せになってしまいます。
解決策の回答をお願いします。
######本来指定したい状態　※赤枠部

######現在の誤りのある状態　※赤枠部
※左に配置した画像の中央寄せが適用されていない

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

使用機器：Dynabook 15インチ
使用ブラウザ：Chrome
使用エディタ：Visual Studio Code

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>デイトラ/copy</title>
7  <link rel="stylesheet" href="stylesheet.css">
8  
9</head>
10<body>
11  <header>
12    <div class="container">
13      <div class="header-left">
14        <h2>30DAYSトライアル</h2>
15      </div>
16      <div class="header-right">
17        <a href="#">デイトラとは</a>
18        <a href="#">コース一覧</a>
19        <a href="#">お問い合わせ</a>
20      </div>
21    </div>
22  </header>
23  <div class="main">
24    <div class="container">
25      <h1>1日1題30日で<br>プロのWebエンジニアになろう！</h1>
26      <p>毎日指定された課題をこなすだけ！未経験から<br>30日でプログラミングスキルが身に付きます</p>
27    </div>
28  </div>
29  <div class="about-wrap">
30    <div class="container">
31      <div class="heading">
32        <h1>デイトラとは</h1>
33      </div>
34      <div class="about">
35        <div class="box">
36          <img src="img/about.png" >
37          <div class="right">
38            <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身に付きます。<br>1日1題30日でプロのWebエンジニアを目指しましょう！
39            </p>
40          </div>
41        </div>
42
43              <!-- デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>習アプリです。毎日設定された課題をこなしていくだけで、未経<br>験から30日でプログラミングスキルが身に付きます。<br>1日1題30日でプロのWebエンジニアを目指しましょう！ -->
44
45          </div>
46        </div>
47      </div>
48    </div>
49  </div>
50  <div class="service"></div>
51  <div class="contact"></div>
52  <footer></footer>
53</body>
54</html>

css
1* {
2  color: navy;
3  text-decoration: none;
4  box-sizing: border-box;
5}
6
7div {
8  display: block;
9}
10header {
11  height: 65px;
12  width: 100%;
13  background-color: white; 
14  position: fixed;
15  top: 0;
16  z-index: 10;
17}
18.header-left {
19  float: left;
20  margin-left: 200px;
21}
22.header-right {
23  float: right;
24  margin-right: 200px;
25}
26.header-right a {
27  line-height: 65px;
28  padding: 0 25px;
29  /* color: white; */
30  display: block;
31  float: left;
32  transition: all 0.5s;
33}
34
35.main h1 {
36  /* opacity: 0.7; */
37  font-size: 45px;
38  /* letter-spacing: 5px; */
39}
40h1 {
41  display: block;
42  font-size: 2em;
43  margin-block-start: 0.67em;
44  margin-block-end: 0.67em;
45  margin-inline-start: 0px;
46  margin-inline-end: 0px;
47  font-weight: bold;
48}
49.main {
50  padding: 180px 0 100px 0;
51  background-image: url(img/main-vsual-nontitle.png);
52  /* color: white; */
53  background-size: cover;
54  text-align: center;
55}
56.about-section {
57  float: left;
58}
59.heading {
60  padding-top: 30px;
61  padding-bottom: 30px;
62  text-align: center;
63}
64
65.about {
66  text-align: center
67}
68.box {
69  margin: 10px 0;
70  float: left;
71  width: 100%;
72
73}
74.box img {
75  max-width: 40%;
76  float: left;
77}
78.box p {
79  margin: 0;
80  padding: 10px;
81}
82.right {
83  width: 60%;
84  float: left;
85}

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは。

以下を追加するとどうですか？

css
1.box {
2	display: flex;
3	justify-content: center;
4}
5

投稿2020/12/07 05:35

Lhankor_Mhy

総合スコア36158

_505turkish

2020/12/07 06:02

ご回答ありがとうございます。追加してみましたがレイアウトに変化は見られませんねどうすれば解決したものか…

Lhankor_Mhy

2020/12/07 06:05

当方では解決します。ご提示いただいていない部分のコードが原因かもしれませんね。

Lhankor_Mhy

2020/12/07 06:09 編集

サンプルを作成しました。 https://jsfiddle.net/Lhankor_Mhy/m875ftn1/ こちらのページでも「レイアウトに変化が見られない」でしょうか？

_505turkish

2020/12/07 07:11

ありがとうございます。サンプルを参照し、サンプル内のコードをエディタへコピペしましたがレイアウトに変化は見られませんでした。コードもHTML・CSS共にすべて提示したはずなのですが…

Lhankor_Mhy

2020/12/07 07:21

繰り返しになって申し訳ないですが、サンプルではレイアウトに変化が見られたのかどうかを教えてください。

_505turkish

2020/12/07 08:10

URL内のレイアウトでしたか。認識を誤って返信してました。お手数お掛けしてすみません。サンプル内の変化は見られます。サンプル内レイアウトは私が目指しているイメージに近いです。サンプル内テキストは問題なく表示されています。サンプル内画像は本来指定したものから、別の物(about.pngと中央に表示された画像)に差し代わっています。

Lhankor_Mhy

2020/12/07 12:20

ご提示のコードでは、CSS読み込みを２つ行っているようですが、ご提示いただいているのは1つだと思います。もう1つの方に原因があるのでは？

_505turkish

2020/12/07 13:15

ご指摘ありがとうございます。質問の情報に不備がありましたので、情報を修正して後ほど再投稿します。

Lhankor_Mhy

2020/12/07 17:26 編集

質問の編集拝読。特に回答に変更するべきところはないと思いますが、とりあえず、 .right { width: 60%; float: left; } ↑これを全部消してみてはどうでしょうか。

_505turkish

2020/12/08 02:32

解決しました。ありがとうございます。 .right { width: 60%; float: left; } ↑これを全部消し... .box { display: flex; justify-content: center; } ↑を追加することで解決しました。ご丁寧にご教示いただき、ありがとうございました。

Lhankor_Mhy

2020/12/08 02:44

ご解決されて何よりです。

行動規範の内容に同意します