html/cssで違うdiv要素のh2が横並びになってしまう

初心者・html/cssで違うdiv要素のh2が横並びになってしまう

Progateの初級の道場をやっているのですが。ボールドテキスト
imgとp要素が入ったdivのclassをfloat;leftで左に並べたアイコンを作り
その次に別のdiv classのh2で書いた「お問い合わせ」という文字が上のdiv　要素のアイコンの右側に並んでしまいます

初級者の道場クラスを見本通りに作るには下に表示されなくてはいけないので困っています
h2で書いたクラスにはfloatを適用していないのでなぜ右に並ぶのかを教えてほしいです

■■な機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <!-- ここからHTMLを書き始めてください -->
10    <header>
11      <div class="header-logo">
12        <h1>Progate</h1>
13      </div>
14      <div class="header-list">
15        <ul>
16          <li>プログラミングとは</li>
17          <li>学べるレッスン</li>
18          <li>お問い合わせ</li>
19        </ul>
20        
21      </div>
22    </header>
23    <div class="main">
24      <div class="copy-container">
25        <h1>HELLO WORLD<span>.</span></h1>
26        <h2>プログラミングの世界へようこそ</h2>
27      </div>
28      <div class="main">
29        <p class="main-p">学べるレッスン</p>
30        <div class="main-icon">
31          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
32          <p>HTML & CSS</p>
33          
34        </div>
35        <div class="main-icon">
36          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
37          <p>PHP</p>
38        </div>
39        <div class="main-icon">
40          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
41          <p>Ruby</p>
42        </div>
43        <div class="main-icon">
44          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
45          <p>Swift</p>
46        </div>
47      </div>
48      <div class="contact-form">
49        <h2>お問い合わせ</h2>
50      </div>
51      
52    </div>
53    <footer></footer>
54  </body>
55</html>

css
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p,
5form, input, div {
6  margin: 0;
7  padding: 0;
8}
9
10body {
11  font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;
12}
13
14li {
15  list-style: none;
16}
17
18/* ここからCSSを記述してください */
19header {
20  background-color: #26d0c9;
21  height: 90px;
22  color: white;
23}
24.header-logo{
25  float: left;
26  padding: 20px 40px;
27}
28.header-list li{
29  float:left;
30  padding: 30px 20px;
31}
32.copy-container h1{
33  font-size: 130px;
34}
35.copy-container span{
36  color: #ff6a6a;
37}
38.copy-container h2{
39 font-size: 60px;
40}
41.copy-container{
42  padding: 100px 80px;
43  
44}
45.main{
46  float: left;
47  margin-bottom: 70px;
48  padding-left: 30px;
49
50}
51.main-icon{
52  float: left;
53  padding: 0 20px;
54  
55}
56.main-p{
57  font-size: 30px;
58  font-weight: bold;
59  padding-bottom: 10px;
60  margin-bottom: 50px;
61  border-bottom: 2px solid #dee7ec
62}
63
64.main-icon p{
65  font-size: 24px;
66  padding-top: 30px;
67}
68