画像のように文字を配置したい。

前提・実現したいこと

画像のように「デイトラとは」「コース一覧」「お問い合わせ」を30DAYSトライアルと同じ列に配置したいです。

発生している問題・エラーメッセージ

30DAYSトライアルの下に「デイトラとは」「コース一覧」「お問い合わせ」が配置されてしまっています。
状況をわかりやすくするために画像を挿入したのですが、エラーが発生して表示されなかったため文字だけでの説明になります。申し訳ありません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <link rel="stylesheet" href="css/style.css">
5    <meta charset="UTF-8">
6    <title>練習</title>
7  </head>
8  <body>
9    <h2 class="hai">30DAYSトライアル</h2>
10    <div class="header-right">
11      <h3>デイトラとは</h3>
12      <h3>コース一覧</h3>
13      <h3>お問い合わせ</h3>
14    </div>
15    <header>
16      <img src="img/main-vsual.png">
17    </header>
18
19      <h1>デイトラとは</h1>
20      <section>
21        <div class="pic">
22          <img src="img/about.png" alt="" width="700" height="500">
23        </div>
24
25        <div class="desk">
26          <p class="deitora">デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>
27            習アプリです。毎月設定された課題をこなしていくだけで、未経<br>
28            験から30日でプログラミングが身に付きます。<br>
29            1日1題30日でプロのWebエンジニアを目指しましょう！
30          </p>
31        </div>
32      </div>
33    </section>
34
35    <div class="iti">
36    <h1>コース一覧</h1>
37
38    <div class="gazo-box">
39      <img src="img/web_first.png" alt="" width="400"height="200">
40      <p>HTML/CSS/BootStrap</p>
41      </div>
42
43      <div class="gazo-box2">
44      <img src="img/web_second.png" alt="" width="400"height="200">
45      <p>HTML/CSSJavaScript//jQuery</p>
46    </div>
47
48    <div class="gazo-box3">
49      <img src="img/web_third.png" alt="" width="400"height="200">
50      <p>PHP/WordPress</p>
51    </div>
52
53    <h1>お問い合わせ</h1>
54    <h2 class="a">さあ今日から始めよう</h2>
55    <div class="btn">無料ではじめる</div>
56  </body>
57</html>
58

css
1div.iti {
2  text-align: center;
3}
4
5h1 {
6  color:darkslategray;
7  text-align:center;
8  clear:both;
9}
10
11.hai{
12  color: darkslategray;
13  padding-left: 350px;
14}
15
16.header-right{
17  display: flex;
18
19}
20
21section{
22  display:flex;
23}
24
25.pic{
26  margin-right:30px;
27  padding-left: 190px;
28  display: inline-block;
29  /* width: 70px;
30  height: ; */
31}
32
33.desk{
34  flex: 1;
35  padding-left: 30px;
36}
37
38p.deitora{
39  color:#3399CC;
40  padding-bottom: 100px;
41}
42
43.a{
44  text-align:center;
45  padding-top:100px;
46}
47
48.gazo-box {
49  justify-content:space-between;
50  border:1px;
51  padding-right:20px; 
52  padding-left:20px;
53  text-align: center;
54  display:inline-block;
55}
56.gazo-box2 {
57  justify-content:space-between;
58  border:1px;
59  padding-right:20px; 
60  padding-left:20px;
61  text-align: center;
62  display:inline-block;
63}
64.gazo-box3 {
65  justify-content:space-between;
66  border:1px;
67  padding-right:20px; 
68  padding-left:20px;
69  text-align: center;
70  display:inline-block;
71}
72
73.gazo-box p {
74  text-align:left;
75  vertical-align: top;
76}
77
78.gazo-box2 p{
79  text-align:left;
80}
81
82.gazo-box3 p{
83  text-align:left;
84}
85
86.btn{
87  text-decoration: none;
88  font-weight:bold;
89  font-size: large;
90  display:inline-block;
91  background: #ff6666;
92  width:300px;
93  line-height:3;
94  padding:5px;
95  border-radius:5px;
96  color:white;
97}
98
99

試したこと

display:flex;を使って横並びにしたのですが、画像のように配置されませんでした。

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

回答1件

css
1<style>
2.wrap{
3display:flex;
4justify-content:space-between;
5}
6.header-right{
7display:flex;
8}
9</style>
10<div class="wrap">
11<h2 class="hai">30DAYSトライアル</h2>
12<div class="header-right">
13<h3>デイトラとは</h3>
14<h3>コース一覧</h3>
15<h3>お問い合わせ</h3>
16</div>
17</div>