CSS float 横並びにならない

flat: left;と記述しても、
contents-itemのところが横並びにならず
原因がわからず困っています。
わかる方がいれば教えていただけるとありがたいです。

コード

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body>  <div class="header"> <div class="header-logo">Progate</div> <div class="header-list"> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> </div> <div class="main"> <div class="copy-container"> <h1>HELLO WORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div> </div> <div class="contents"> <h3 class="section-title">学べるレッスン</h3> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg"> <p>HTML & CSS</p> </div> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg"> <p>PHP</p> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg"> <p>Ruby</p> <div class="contents-item"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg"> <p>Swift</p> </div> </div> <div class="contact-form">

</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;
padding: 33px 20px;
float: left;

}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}
.header-logo {
float: left;
font-size: 36px;
padding: 20px 40px;

}
.header-list li {
float: left;
padding: 33px 20px;

}

.copy-container h1 {
font-size: 140px;

}
.copy-container h2 {
font-size: px;
}
.copy-container span {
color: #ff4a4a;
}
.section-title {
border-bottom: 2px solid #dee7ec;
}
.contents-item {
float: left;
font-size: 25px;
}
.main {
padding: 100px 80px;

}
.contents {
height: 500px;
font-size: 25px;
}
.contact-submit {
background-color: #dee7ec;
color: #888eab;

}

.footer {
background-color: #2f5167;
color: #fff;
height: 120px;
padding: 40px;

}
.footer-logo {
float: left;
font-size: 32px;

}
.footer-list {
float: right;

}
.footer-list li {
padding-bottom: 20px;
}

h1 {
font-size: 140px;
float: none;

}
h2 {
font-size: 60px;
}
.header {
background-color: #26d0c9;
color: #fff;
height: 90px;
}

.header-logo {
font-size: 36px;
float: left;
padding: 20px 40px;
}

K_3578

2021/04/23 08:09

なぜ、新規で質問を挙げる必要があるのでしょうか。同様の質問を投稿するのは禁止です。本件には削除リクエストを送り、前の質問で回答を募ってください。

Lhankor_Mhy

2021/04/23 08:11

同じような質問を連投するのはいかがなものでしょうか。 https://teratail.com/questions/334754

meg_

2021/04/23 10:47

・「flat: left;と記述しても、」"flat"ですか？・コードは「コードの挿入」で記入してください。

mayugee228

2021/05/16 09:29

初めて利用させていただいたので使い方がいまいち分かっていませんでした。申し訳ございません。しかし、初心者や初めて使う人もいると思うのでもう少しお手柔らかにお願いしたいです。

Lhankor_Mhy

2021/05/16 14:14

では、もう少し柔らかく改めます。同じような質問を連投したくなる気持ちもわかるのですが、しかし、一般に同じ質問を複数立てることは嫌われています。いくつか理由をあげます。・他の質問で付けられた回答を知らずに同内容の回答を付けたり、他の質問ですでに解決したことを知らずに検討を続けたり、善意の回答者の労力が無駄になる。・この質問にいる回答者だけでは質問が解決するか不安であるように見えるので、回答者への不信感を表明していると感じ取った場合、その回答者に不快感を与える可能性がある。以上のように誤ったコミュニケーションになってしまう可能性があります。誤ったコミュニケーションは問題解決を阻害するだけではなく、不毛な論争などで時間や労力を無駄にし、質問者と回答者と共に良いことはありません。ですので、同じ内容で新規の質問を建てることはできるだけ避け、どうしても新しい質問を建てる場合には、ほかのユーザーが納得できそうな理由を挙げていただくことによって、よりよいコミュニケーションが構築できるのではないかと考えています。また、teratailのガイドラインにも同じ質問を複数建てることは推奨されていませんので、質問をされる前にまずヘルプを一読されることをお勧めします。以上、よいQ&Aサイトを構築していくためにご協力をお願いします。