【HTML/CSS】floatについて

HTML/CSSについて、floatがうまくいきません。
flexBoxも試してみましたが上手くいかないので、
Classのつけ方が間違っているのかな、と考えております。

どのクラスにflaotをつけてみても横に並ばず、
また横に並んでも3つの画像が画面（width）の真ん中に配置されないなど問題が解消されません。

HTML
1<!--コース一覧-->
2<div class="main-bottom">
3    <div class="heading">
4    <h3>コース一覧</h3>
5</div>
6<div class="lessons">
7    <div class="lesson">
8        <img src="img/web_first.png" class="lesson-img">
9        <p>HTML / CSS / Bootstrap</p>
10    </div>
11    <div class="lesson">
12        <img src="img/web_second.png" class="lesson-img">
13        <p>HTML / CSS / JavaScript / JQuery</p>
14</div>
15    <div class="lesson">
16        <img src="img/web_third.png" class="lesson-img">
17        <p>PHP / WordPress</p>
18</div>
19
20    </div>
21</div>

CSS
1.main-bottom {
2    height: 300px;
3    width: 100%;
4    background-color: darkkhaki;
5}
6.lesson {
7    float: left;
8}
9.lessons {
10    
11}
12.lesson p {
13    font-weight: normal;
14}
15.lesson-img {
16    width: 30%;
17}

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

回答1件

ベストアンサー

こちらでいかがでしょうか?

CSS
1.lesson {
2    /* float: left; */
3}
4.lessons {
5    display: flex;
6    justify-content: center;
7}

投稿2020/04/07 15:15

new1ro

総合スコア4528

neroS2eng

2020/04/08 12:36

解決しました！ありがとうございました！ ```CSS .main-bottom { width: 100%; background-color: darkkhaki; } .lessons { justify-content: center; display: flex; margin-left: 5%; } .lesson p { font-weight: normal; } .lesson-img { width: 90%; } ```

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