要素同士が横に並んでしまう

前提

Progateの「HTML&CSSコース」で、現在道場初級編です。
現在練習で作成している見本のページは、以下の構成になっています。

［ヘッダー］
［タイトル］
［コンテンツ］
［お問い合わせフォーム］

［コンテンツ］の部分まではコードを書き終えた状態です。
［お問い合わせフォーム］のコードを書き始めようとしたら［コンテンツ］部分の横に文字が入力されてしまいます。

「CSS　要素同士　横並びになってしまう」「CSS　要素　下にいかない」などのキーワードで検索してみましたが、調べてみても上手く答えを出せませんでした。（現状を解決する適切なキーワードが分からない）

実現したいこと

［コンテンツ］の下に［お問い合わせフォーム］を作成したい

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

該当のソースコード

HTML
1    <div class="contents">
2      <div class="contents-container">
3        <h3>学べるレッスン</h3>
4        <div class="contants-item">
5          <div class="content">
6             <img src="https://prog-8.com/shared/images/lesson/html/study/html.svg">
7            <p>HTML & CSS</p>
8          </div>
9          <div class="content">
10            <img src="https://prog-8.com/shared/images/lesson/html/study/php.svg">
11            <p>PHP</p>
12          </div>
13          <div class="content">
14            <img src="https://prog-8.com/shared/images/lesson/html/study/ruby.svg">
15            <p>Rudy</p>
16          </div>
17          <div class="content">
18            <img src="https://prog-8.com/shared/images/lesson/html/study/swift.svg">
19            <p>Swift</p>
20          </div>
21        </div>
22      </div>
23    </div>
24    
25    <div class="message">
26      <h3>お問い合わせ</h3>
27     </div>
28
29
30

CSS
1.contents-container {
2  padding-bottom: 100px;
3  padding-right: 80px;
4  padding-left: 80px;
5}
6
7.contents-container h3 {
8  font-size: 28px;
9  border-bottom: 2px solid #dee7ec;
10  padding-bottom: 15px;
11  margin-bottom: 50px;
12}
13
14.contents-item{
15  margin-bottom: 100px;
16}
17
18.content {
19  float: left;
20  padding-right: 40px;
21}
22
23.content p {
24  font-size: 24px;
25  padding-top: 30px;
26}

試したこと

回答を見ながら写すと上手くいくのですが、原因がわからないままです。

補足情報（FW/ツールのバージョンなど）

1T2R3M4

2022/08/08 21:47

>調べてみても調べたことを質問に追記していただけませんか。また >回答を見ながら写すと上手くいく回答と現状のコードの違いは何でしょうか。質問に追記してください。

m.ts10806

2022/08/08 22:38 編集

タイトルは要件を記載してください。あと質問に初心者マークをつけると良いです。質問は編集できますので適宜調整を。あとProgateの課題であれば確か全く同じように書かないと合格にならなかったはずなので、そのあたりは考慮したほうが良さそうです。同じレイアウトにできる方法は1つではないですが、「カリキュラムで習ったとおりにする」が主題のようですので。スペース１つ違うだけでもNGとかあるかも。