HTMLでのdivクラス分けの問題

前提・実現したいこと

現在、progateでHTMLとCSSの勉強をしています。

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

HTMLでの記入で問題が発生しました。
contentsとcontact-formを分けているはずなのに、contact-formの内容がcontents-itemの横に表示され、CSSに書いても何も変更が起こりません。

該当のソースコード

HTML
1 <div class="main">
2      <div class="copy-container">
3        <h1>HELLO WORLD<span>.</span></h1>
4        <p>プログラミングの世界へようこそ</p>
5      </div>
6      <div class="contents">
7        <h2 class="section-title">学べるレッスン</h2>
8        <div class="contents-item">
9          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"/>
10          <p>HTML & CSS</p>
11        </div>
12        <div class="contents-item">
13          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"/>
14          <p>PHP</p>
15        </div>
16        <div class="contents-item">
17          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"/>
18         <p>Ruby</p>
19        </div>
20        <div class="contents-item">
21          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"/>
22         <p>Swift</p>
23        </div>
24      </div>
25      
26      <div class="contact-form">
27        <h3 class="section-title">お問い合わせ</h3>
28        <p>メールアドレス(必須)</p>
29        <input>
30        <p>お問い合わせ(必須)</p>
31        <textarea></textarea>
32        <p>※必須項目は必ずご入力ください</p>
33        <input class="contact-submit" type="submit" value="送信" 123>
34      </div>
35    </div>