画像＋文字の塊３つが横並びになりません。

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
HTML、CSS初心者です。
画像＋文字が上下縦にある塊が３つあります。
それを横並びにしたいです。

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

２つは横に並ぶのですが１つがなっていません。
（また、３つなので均等に並ぶように33％に設定したいです。）

a b
c

というようになってしまっています。

該当のソースコード

HTML

<div class="layout1">
<img src="heat.png" alt="ハート"><br>
<p class="description">Desin　Skills</p>
<p class="text1">HTML , CSS , Photoshop ,<br>
 Illustratorを独学で勉強中。<br>
がんばります。</p></div>

<div class="layout2">
<img src="pc.png" alt="パソコン"><br>
<p class="description">PC　Skills</p>
<p class="text1">Word , Excel , Power Point 。<br>
全商ワープロ実務検定１級保持、<br>
タッチタイピング得意です。</p></div>


<div class="layout3">
<img src="finger.png" alt="指"><br>
<p class="description">Other　Skills</p>
<p class="text1">・情報収集能力、探求心<br>
　（SNSやメディア、書籍）<br>
・コミュニケーション能力<br>
　（社内外取引）</p></div>





css


.layout1,layout2,layout3{
width:33%;
float:left;
}

試したこと

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

この該当箇所のすぐ上に画像があるのですが、<hr>で
区切ってあるので特に関係ないとは思います。
どなたかどうかお願いします。初心者で知識不足でごめんなさい。

Comments

[退会済みユーザー]

ヒント　ブラウザCSS、マージン、パッディング

[yyymmm]

ありがとうございます！

Answer 1

CSSのセレクタ「class記述」を見直してみてください。

※floatは「クリア（解除）」も気を付けてください。位置により、レイアウトに影響します。

Comments

[yyymmm]

ありがとうございました！

[yoshinavi]

＞それぞれ1つずつで登録すると直りました！

↓　
セレクタをまとめても本来は問題ありません。
今回の場合は、セレクタの誤記述で、2番目3番目のセレクタ名の前にドット(.)が無いために、クラス（class）セレクタと認知されていなかったのが原因です。
※何も指定が無いとブロック要素は幅が100％を取ります。

解決されて何よりです。
(^^)

一部、修正しました。

[yyymmm]

遅くなりました。
本当に、ありがとうございますTT

Answer 2

cssで、まとめて

.layout1,layout2,layout3{
width:33%;
float:left;
}

としていましたが、それぞれ1つずつで登録すると直りました！コメント下さった方々ありがとうございました！