HTMLに関する質問(とても初心者)

Question

HTMLをProgateで学習しています。
本来であれば、「学べるレッスン」のセクションの下に「お問い合わせ」のセクションが来るはずなのですが、
なぜか、「学べるレッスン」の中に「お問い合わせ」が来てしまいます。
(詳細は添付の画像を見ていただきたいです。上が自作のコード、下が見本のコードの成果物です。）
自分で書いたコードを下に貼り付けておくので、どこが間違えているのか、教えていただけるとありがたいです。

[HTML]

<div class="header"> <h1>Progate</h1> <div class="header-list"> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> </div> <div class="contents-title"> <h1>HELLO WORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div> <div class="contents-list"> <h3>学べるレッスン</h3> <div class="content"> <img src="https://prog-8.com/shared/images/lesson/html/study/html.svg"> <p>HTML & CSS</p> </div> <div class="content"> <img src="https://prog-8.com/shared/images/lesson/html/study/php.svg"> <p>PHP</p> </div> <div class="content"> <img src="https://prog-8.com/shared/images/lesson/html/study/ruby.svg"> <p>Ruby</p> </div> <div class="content"> <img src="https://prog-8.com/shared/images/lesson/html/study/swift.svg"> <p>Swift</p> </div> </div> <div class="contact-form"> <h3>お問い合わせ</h3> </div> </body> </html>

[CSS]
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
margin: 0;
padding: 0;
}

body {
font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
}

li {
list-style: none;
}

/* ここからCSSを記述してください */
.header{
background-color:#26d0c9;
color:#fff;
height:90px;
}
.header h1{
float:left;
padding:20px 40px 20px 40px;
font-size:36px;
font-weight:normal;
}
.header-list li{
float:left;
padding-top:33px;
padding-left:20px;
padding-right:20px;
}
.contents-title{
padding:100px 80px 100px 80px;
}
.contents-title h1{
font-size:140px;
}
.contents-title h2{
font-size:60px;
}
span{
color:#ff4a4a;
}
.contents-list{
margin-left:80px;
margin-right:80px;
}
.contents-list h3{
border-bottom:2px solid #dee7ec;
font-size:28px;
padding-bottom:15px;
}
.content{
padding-top:50px;
padding-right:40px;
float:left;
padding-bottom:100px;
}
.content p{
padding-top:30px;
font-size:24px;
}

Comments

[m.ts10806]

>(とても初心者)
書かなくて良いです。そのために「初心者マーク」を質問につけられるわけです。
あと、コードはマークダウンのcodeにてご提示ください（ヘルプページ参照）

Answer 1

どこが間違えているのか、教えていただけるとありがたいです。

「お問い合わせ」のセクションのcontact-formスタイルが存在しません。
おそらく以下のような感じのスタイルが必要なんじゃないでしょうか。

.contact-form {
	clear: both;
	margin-left:80px;
	margin-right:80px;
}
.contact-form h3{
	border-bottom:2px solid #dee7ec;
	font-size:28px;
	padding-bottom:15px;
}