前提・実現したいこと

"lesson-wrapper"の高さが少しずれているのを直したい

追記質問です。
真ん中の4色のアイコンを取り入れるためにhtmlで<div class="lesson"から最後の</div>まで4回分あるのですが（html二回目以降省略済）毎回同じクラス名をつけるのになぜ毎回</div>で閉じてまたつけるのでしょうか。１回目の時に<div class="lesson"をつけて繰り返して４回分終わったときに</div>で閉めたらうまくいきませんでした。何回も同じで手間に感じてしまうのですが、なぜ同じクラス名なのに一度にではなくて毎回毎回つける必要があるのでしょうか。よろしくお願いします。

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

エラーメッセージ

該当のソースコード

html
1<div class="lesson-wrapper">
2    <div class="container">
3     <div class="heading">
4     <h2>Learn Where to Get Started!</h2>
5     </div>
6      <div class="lessons">
7       <div class="lesson">
8        <div class="lesson-icon">
9        <img src="https:---">
10        <p>HTML & CSS</p>
11        <div>
12        <p class="text-contents">あああ</p>
13       </div>
14     </div>

※<div class="lesson">から最後の</div>まではあと3回続きますが省略してます。

css
1.lesson-wrapper {
2  background-color: #f7f7f7;
3  text-align: center;
4  height: 580px;
5}
6.heading h2 {
7  font-weight: normal;
8 
9}
10.heading {
11  padding-top: 80px;
12  padding-bottom: 50px;
13  color: #5f5d60;
14}
15.lesson-icon {
16  position: relative;
17}
18.lesson-icon p {
19  position: absolute;
20  top: 44%;
21  width: 100%;
22  color: white;
23}
24.text-contents {
25  color: #b3aeb5;
26  font-size: 13px;
27  width: 80%;
28  display: inline-block;
29  margin-top: 15px;
30}
31.lesson {
32 float: left;
33 width: 25%;
34}
35.container {
36  text-align: center;
37  width: 1170px;

試したこと

答えのコードと比較、Atomを使って検証したが違いがわからなかった

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

windows 10, google chrome
初めて質問します。プログラミングも始めたばかりです。
コード見づらかったり、わかりづらかったら申し訳ないです。

miyabi_pudding

2020/05/17 02:35 編集

質問タグを変えましょう。今回の場合は、 CSS、HTMLですね。 Windows10を入れてると、 OSのバッチ処理をしたり（WSHとか）、Windows10のアプリケーションの話になってしまいます。

moomin110345

2020/05/17 03:19

質問タグ変えました！親切に教えていただいて嬉しいです。ありがとうございます！

miyabi_pudding

2020/05/17 04:29

何度もすみません、あと二つほど・・・。・htmlコードも記載してください。・ソースコードは、ソースブロックをお使いください。 ```ここに言語名ここにソースコード ``` という形式です。

moomin110345

2020/05/17 06:25

至らないところが多くて申し訳ありません。なおったと思います！ありがとうございます。

miyabi_pudding

2020/05/17 06:32

ええと、おそらくですが、 .containerに対してのCSS省略してますよね？そこも関係してくると思うので、記載してください。あと、<p class="text-contents>あああ</p> の"が一個足りませんが、元のコードではちゃんとついてるなら、質問コードでもしっかりつけてください。（元コードがそうなっているなら、そこをしっかりするだけで直る可能性がある）

moomin110345

2020/05/17 06:48

.containerのCSS抜けてるの気づいていませんでした。すみません、追加しました！ text-contentsの”は元のコードではついてます！移すときに抜けてしまいましたすみません。たくさん教えていただいて本当にありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.lessons {
2  margin-top: 答えと同じ位置になるまで、数値を調整するpx;
3}

追加質問に関して

真ん中の4色のアイコンを取り入れるためにhtmlで<div class="lesson"から最後の</div>まで4回分あるのですが（html二回目以降省略済）毎回同じクラス名をつけるのになぜ毎回</div>で閉じてまたつけるのでしょうか。１回目の時に<div class="lesson"をつけて繰り返して４回分終わったときに</div>で閉めたらうまくいきませんでした。何回も同じで手間に感じてしまうのですが、なぜ同じクラス名なのに一度にではなくて毎回毎回つける必要があるのでしょうか。よろしくお願いします。

クラスの機能は、複数の要素に対して、同じような機能やスタイルを当てることだからです。
閉じタグを毎回つけるのは、そのスタイルないし機能を付与したいdiv要素の範囲を明確にするためです。