Progate HTML初級の道場で＜p＞がずれてしまい、困っています。

Question

前提・実現したいこと

HTML&CSSの初級道場を行っています。以下の画像と＜p＞がずれてしまうエラーが発生しました。
初心者のため、つまずいてしまい先に進めません。ご協力宜しくお願い致します。

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

①HTML

<div class="main">

<div class="copy-container">
  <h1>HELLO
  WORLD<span>.</span></h1>
  <h2>プログラミングの世界へようこそ</h2>

</div> <div class="contents"> <h3>学べるレッスン</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> <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> <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> </body> </html>

②CSS

.main{
margin:100px 80px;
}

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

}

.copy-container span{
color:ff4a4a;
}

.copy-container h2{
font-size:60px;
color:black;
}

.contents{
height:500px;
margin-top: 100px;
}

.contents h3{
color:black;
font-size:28px;
padding-bottom:15px;
border-bottom:2px solid #dee7ec;
margin-bottom: 50px;
}

.contents-item img{
float:left;
margin-right:40px;
}

.contents-item p{
color:black;
font-size:24px;
margin-top:30px;

}

該当のソースコード

試したこと

答えと見比べ、修正に努めましたがエラーが消えませんでした。

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

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

コードはマークダウンのcode機能にてご提示ください

[nanatsuboshi]

承知いたしました。ご指摘ありがとうございます。

Answer 1

float:left; の設定箇所が間違っていると思われます。

.contents-item img{
float:left;
margin-right:40px;
}

imgに設定してますので、その後の P が横に来てしまいます。

img と p の親要素の .contents-item に設定すれば見本のように横並びになります。
セレクタを下記に変更すればいいでしょう。

.contents-item {
float:left;
margin-right:40px;
}

Comments

[nanatsuboshi]

迅速なご対応ありがとうございましたm(__)m
大変わかりやすく、すぐに理解できました。中級編に向けて頑張れそうです。
本当にありがとうございました。