HTMLでコンテンツを改行したい

最近HTML/CSSの勉強を始めて、試しに見本のサイトを見て自分でソースコードを書いているんですが、最後のほうで分からないところがあったので誰か教えてください。

これが見本のサイトです。質問した箇所は「お問い合わせ」の部分です。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<link rel="stylesheet" href="style.css">
5<title>picture</title>
6</head>
7<body>
8
9
10<!--メニューバー-->
11<div class="header-title">
12    <h3 class="title">30DAYSトライアル</h3>
13    <ul class="menu">
14        <li>お問い合わせ</li>
15        <li>コース一覧</li>
16        <li>テイトラとは</li>
17    </ul>
18</div class="header">
19<!--ポップ写真-->
20<div class="img-1">
21    <img src="main-vsual.png" 
22    alt="1日1題でプロのwebエンジニアになろう！"
23    width="1800px" style="display: block; margin-left: 
24    auto; margin-right: auto;">
25</div>
26<!--デイトラとは-->
27<div class="body-1">
28        <h2>デイトラとは</h2>
29        <img src="about.png" alt="デイトラとは(画像)"
30        height="400px" >
31        <p class="text" style="text-align: left;">デイトラとは、無料で・迷わず・楽しく学べるプログラミング学
32            <br>習アプリです。毎日設定された課題をこなしていくだけで、未経
33            <br>験から30日でプログラミングスキルが身につきます。
34            <br>１日1題30日でプロのwebエンジニアを目指しましょう！
35        </p>
36</div>
37<!--コース一覧-->
38<div class="body-2">
39    <h2 class="course-title">コース一覧</h2>
40    <div class="course-image">
41        <div class="course-image">
42            <img src="web_first.png" alt="初級コース">
43            <p>HTML/CSS/Bootstrap</p>
44        </div>
45        <div class="course-image">
46            <img src="web_second.png" alt="中級コース">
47            <p>HTML/CSS/JavaScript/jQuery</p>
48        </div>
49        <div class="course-image">
50            <img src="web_third.png" alt="上級コース">
51            <p>PHP/WordPress</p>
52        </div>
53    </div>
54    <h3>お問い合わせ</h3>
55</div>
56<!--お問い合わせ-->
57<div class="form">
58  <h3>お問い合わせ</h3>
59</div>
60</body>
61</html>

CSS
1body{
2  border: 0px;
3  margin: 0px;
4  padding: 0px;
5}
6
7.header-title  li{
8  font-weight: bold;
9  padding-top:20px ;
10  padding-right: 60px;
11  float: right;
12  position: relative; top: 0; 
13  display: table-cell;
14  display: inline;
15}
16
17.title {
18  float: left;
19  margin-bottom: 20px;
20  margin-left: 180px;
21}
22
23.menu {
24  margin-right: 200px;
25}
26
27.img-1 {
28  padding-left: 0px;
29  padding-right: 0px;
30}
31
32.body-1 {
33  margin-top: 80px;
34  text-align: center;
35}
36
37.body-1 img {
38  margin-left: 250px;
39}
40
41.text {
42  float: right;
43  margin-right: 460px;
44}
45
46.course-title {
47  text-align: center;
48}
49
50.course-image  img {
51  width: 506px;
52  margin-right: 40px;
53}
54

このソースコード(HTML/CSS)を実際にGoogleなどで閲覧すると

このように、「お問い合わせ」が「コース一覧」の右に表示されてしまいます。僕は「デイトラとは」と「コース一覧」のように縦に、1つの塊(コンテンツ)として配置したいのですが、どのように改善すればよろしいでしょうか？？

itagagaki

2021/04/29 10:45

貼り付けられた画像のような結果が再現できません。少なくともCSSに .body-2 のスタイルが無いようです。ご確認ください。

Naokun0000

2021/04/29 11:51

再度確認しましたが、画像のような結果になります。.body-2については不要だと分かったのでcssには記述していません。

itagagaki

2021/04/29 12:02

では私が再現しようとしてご提示のコードをコピペしたCodePenをご覧ください。画像が違うのは当たり前なのでいいとして、レイアウトが再現できませんでした。 https://codepen.io/itagagaki/pen/ExZzwxO

Naokun0000

2021/04/29 12:56

ええ？こんなことなりますかね？こちらも再度ごにょごにょします

Naokun0000

2021/04/29 13:18

分かりません。itagagakiさん的にはどこを修正すれば見本のようになると思いますか？

itagagaki

2021/04/29 13:32

あなたが見本にしたページはこれですね？ https://kuu.soragoto.net/HTML_CSS/daytra/index.html こういう情報も示して質問するようにしたほうがいいです。で、このページのHTML/CSSと、あなたが提示されたHTML/CSSで作ったPen https://codepen.io/itagagaki/pen/ExZzwxO とでは、何が違ってこのようになるのか、HTMLもCSSも見比べることができるのですから、ご自分でもう一度考えてみてください。