親要素が小要素いっぱいに広がらない

前提・実現したいこと

lesson-containerのborderの中に小要素であるはずのlesson-contentが入りません。でも、lesson-contentにwidth: 25%;を指定するとlesson-containerの２５％になります。
ちなみに、lesson-wrapperのheightを指定しなかったら、同様にlesson-contentの上にborderが来ます。

該当のソースコード

html
1<div class="lesson-wrapper">
2    <div class="lesson-container">
3      <h2>Learn Where to Get Started!</h2>
4      <div class="lesson-content">
5        <img src="https://prog-8.com/images/html/advanced/html.png" alt="" />
6      </div>
7      <div class="lesson-content">
8        <img src="https://prog-8.com/images/html/advanced/jQuery.png" alt="" />
9      </div>
10      <div class="lesson-content">
11        <img src="https://prog-8.com/images/html/advanced/ruby.png" alt="" />
12      </div>
13      <div class="lesson-content">
14        <img src="https://prog-8.com/images/html/advanced/php.png" alt="" />
15      </div>
16    </div>
17  </div>

css
1.lesson-wrapper {
2  border: solid 5px red;
3  height: 580px;
4  background-color: #f7f7f7;
5}
6
7.lesson-container {
8  width: 1170px;
9  margin: 0 auto;
10  border: solid 5px red;
11}
12
13.lesson-content {
14  float: left;
15}

試したこと

lesson-wrapperのheightの指定を消すと同様にlesson-contentの上にborderが来ます。

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

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

m.ts10806

2020/05/19 10:05

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

new1ro

2020/05/19 10:07

.lesson-contentについての記述をご教示お願いします。おそらくfloat: left;の記述があったりするのではないかと思いますが...

noob-question

2020/05/22 19:59

float: left;抜けてました。すみません。

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

回答1件

ベストアンサー

prog-8.com関連のteratailでの質問をみると、float: left;についての質問がよくあるので
.lesson-contentにfloat: left;が指定されているのだろうな、と推測して回答してみます。

CSS
1.lesson-content {
2  width: 25%;
3  float: left; /* こちらが指定されていると予想 */
4}
5
6/* 以下の記述を追加してください。 */
7.lesson-container::after {
8  content: "";
9  display: block;
10  clear: both;
11}