h1タグの下にpタグを配置したい

ホームページ作成学習中の者です。
h1タグの下にpタグを持っていきたいのですが、画像のように右側にpタグが飛んで行ってしまいます。
display: flex;にすると何故このようなことが起きるのでしょうか？
h1タグの下に持っていく書き方をご教授願います。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>XD</title>
6  <link rel="stylesheet" href="css/styles.css">
7</head>
8
9<body>
10  <header>
11    <div class="header">
12      <div class="header-logo">
13        <h1>LOGO</h1>
14      </div>
15        <nav>
16          <ul>
17            <li><a href="">Home</a></li>
18            <li><a href="">About</a></li>
19            <li><a href="">Contact</a></li>
20          </ul>
21        </nav>
22    </div>
23  </header>
24
25  <main>
26    <div class="main">
27      <div class="main-img">
28        <img src="img/fv.png">
29      </div>
30      <p>Feature</p>
31    </div>
32
33    <div class="submain">
34      <div class="submain-img">
35        <img src="img/sample.png">
36        <h1>What is “Coding Basics”?</h1>
37        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea. commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</p>
38      </div>
39    </div>
40  </main>
41</body>
42</html>

css
1body {
2  margin: 0;
3  padding: 0;
4}
5
6.header {
7  background: #EFA358;
8  display: flex;
9  justify-content: space-between;
10  width: 1366px;
11  height: 80px;
12  margin: 0;
13  /* width: 100%; */
14}
15
16.header-logo {
17  padding-left: 183px;
18  color: #FFFFFF;
19  margin: 0;
20}
21
22.header-logo h1 {
23  width: 82px;
24  height: 31px;
25  /* margin: 0; */
26  font-size: 28px;
27}
28
29nav ul {
30  list-style: none;
31  margin: 0;
32  padding: 0;
33  display: flex;
34}
35
36nav a {
37  color: #FFFFFF;
38  font-size: 20px;
39  width: 100px;
40  text-align: center;
41  line-height: 80px;
42  display: block;
43  text-decoration: none;
44}
45
46nav a:hover {
47    background: #eee;
48}
49
50nav li:last-child {
51  padding-right: 183px;
52}
53
54.main p {
55  font-size: 32px;
56  text-align: center;
57  color: #555555;
58  padding-top: 40px;
59  margin: 0;
60}
61
62.submain-img {
63  display: flex;
64  padding-left: 183px;
65  margin-top: 42px;
66}
67
68.submain-img h1 {
69  font-size: 32px;
70  margin: 0 0 30px 60px;
71}
72
73.submain-img p {
74  width: 394px;
75  margin: 0;
76}
77

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

回答1件

ベストアンサー

h1とpをdivで囲めばできます。

HTML
1    <div class="submain-img">
2      <img src="img/sample.png">
3      <div>
4        <h1>What is “Coding Basics”?</h1>
5        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea. commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu.</p>
6      </div>
7    </div>

投稿2021/08/01 05:11