同じクラスなのに高さがそろわない

Progateの中級編を模写しているのですが、下のスクショのようにimgと文字を重なるようにしたらなぜか高さがづれてしまいます。どうしたらよいでしょうか。ご教授お願いします。

html
1　<!DOCTYPE html>
2<html>
3  <head>
4      <meta charset="utf-8">
5      <title>Progate</title>
6      <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <header>
10      <div class="container">
11        <div class="header-left">
12          <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
13        </div>
14        <div class="header-right">
15          <a class="login" href="#">ログイン</a>
16        </div>
17      </div>
18    </header>
19    <div class="top-wrapper">
20      <h1>LEARN TO CODE.<br> LEARN TO BE CREATIVE.</h1>
21      <h2>Progateはオンラインプログラミング学習サービスです。<br> 初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</h2>
22      <a class="btn signup" href="#">新規登録はこちら</a>
23      <p>or</p>
24      <a class="btn facebook" href="#">Facebookで登録</a>
25      <a class="btn twitter" href="#">Twitterで登録</a>
26    </div>
27    <div class="text-contents">
28     <div class="container">
29      <h3>Learn Where to Get Started!</h3>
30      <div class="lessons">
31        <div class="lesson">
32          <div class="lesson-icon">
33            <img src="https://prog-8.com/images/html/advanced/html.png">
34            <p>HTML & CSS</p>
35          </div>
36          <p class="lesson-text">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
37        </div>
38        <div class="lesson">
39          <div class="lesson-icon">
40            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
41            <p>jQuery</p>
42          </div>
43          <p class="lesson-text">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
44        </div>
45        <div class="lesson">
46          <div class="lesson-icon">
47            <img src="https://prog-8.com/images/html/advanced/ruby.png">
48            <p>Ruby</p>
49          </div>
50          <p class="lesson-text">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
51        </div>
52        <div class="lesson">
53          <div class="lesson-icon">
54            <img src="https://prog-8.com/images/html/advanced/php.png">
55            <p>PHP</p>
56          </div>
57          <p class="lesson-text">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
58        </div>
59      </div>
60     </div>
61    </div>
62  </body>
63</html>

css
1@charset "utf-8";
2
3* {
4  margin: 0;
5  padding: 0;
6}
7
8body {
9	background:#FFF url(../img/share/bg.gif) no-repeat left top;
10	font-family:Hiragino Kaku Gothic ProN W3;
11  font-size:80%;
12  width: 100%;
13}
14
15.container {
16  width: 90%;
17  margin:0 auto;
18}
19
20header {
21  height: 50px;
22  background-color: rgba(34, 49, 52, 0.9);
23}
24
25.header-left {
26  float: left;
27}
28
29.logo {
30  width: 50%;
31  padding-top: 15px;
32}
33
34.header-right {
35  float: right;
36}
37
38.login {
39  line-height: 50px;
40  padding: 0 30px;
41  color: white;
42  text-decoration: none;
43  display: block;
44}
45
46.login:hover {
47  background-color: rgba(255, 255, 255, 0.3);
48  transition: all 0.4s;
49}
50
51.top-wrapper {
52  background-image:url(https://prog-8.com/images/html/advanced/top.png);
53  background-size:cover;
54  color:white;
55  text-align: center;
56  padding: 180px 50px;
57}
58
59.top-wrapper h1 {
60  opacity: 0.7; 
61  font-size: 40px;
62}
63
64.top-wrapper h2 {
65  opacity: 0.7; 
66  font-size: 15px;
67}
68
69.top-wrapper p {
70  opacity: 0.7;
71  padding-bottom: 15px;
72}
73
74.btn {
75  color: white;
76  text-decoration: none;
77  display: inline-block;
78  padding: 8px 24px;
79  border-radius: 4px;
80
81}
82
83.signup {
84  background-color:#239b76; 
85  margin-top: 15px;
86  margin-bottom: 15px;
87}
88
89.facebook {
90  background-color: #3b5998;
91  margin-right: 8px;
92}
93
94.twitter {
95  background-color: #55acee;
96}
97
98.text-contents {
99  text-align: center;
100  padding-top: 100px;
101  padding-bottom: 50px;
102  background-color: #f7f7f7;
103}
104
105.text-contents::after {
106  content: "";
107  display: block;
108  clear: both;
109}
110
111.text-contents h3 {
112  font-weight: normal;
113  font-size: 30px;
114  padding-bottom: 30px;
115  color: #5f5d60;
116}
117
118.lesson {
119  float: left;
120  width: 25%;
121  position: relative;
122}
123
124.lesson-icon p {
125  color: white;
126  font-size: 15px;
127  position: absolute;
128  top: 35%;
129  width: 100%;
130}
131
132.lesson-text {
133  color: #b3aeb5;
134  margin: 0 auto;
135  width: 80%;
136}

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

回答1件

ベストアンサー

「PHP」などを表示しているp要素の直接の親(lesson-iconクラスのdiv要素)にposition: relative;を指定してください。

CSS
1.lesson-icon {
2    position: relative;
3}

投稿2021/01/27 11:54

Daregada

総合スコア11990

jinjinjimajima

2021/01/27 12:08

回答ありがとうございます。基本的なところを見逃していました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

同じクラスなのに高さがそろわない

関連した質問