【HTML/CSS】floatについて

Question

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

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

<!--コース一覧-->
<div class="main-bottom">
    <div class="heading">
    <h3>コース一覧</h3>
</div>
<div class="lessons">
    <div class="lesson">
        <img src="img/web_first.png" class="lesson-img">
        <p>HTML / CSS / Bootstrap</p>
    </div>
    <div class="lesson">
        <img src="img/web_second.png" class="lesson-img">
        <p>HTML / CSS / JavaScript / JQuery</p>
</div>
    <div class="lesson">
        <img src="img/web_third.png" class="lesson-img">
        <p>PHP / WordPress</p>
</div>

    </div>
</div>

.main-bottom {
    height: 300px;
    width: 100%;
    background-color: darkkhaki;
}
.lesson {
    float: left;
}
.lessons {
    
}
.lesson p {
    font-weight: normal;
}
.lesson-img {
    width: 30%;
}

Answer 1

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

.lesson {
    /* float: left; */
}
.lessons {
    display: flex;
    justify-content: center;
}

Comments

[neroS2eng]

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

```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%;
}
```