横並びの画像を真ん中に揃えたい

現在、下記サイトの模写コーディングを行っていますが、行き詰まっている箇所があります。
https://isara.life/
上記サイトへアクセスして頂き
「他のプログラミングスクールとここが違う！iSara[イサラ]の３つのメリット」
という箇所の下にある、3つの項目を真ん中に見本と同じように寄せることができず、画像と文章同士の隙間をなくすことができません。

HTML
1### 該当のソースコード
2＜HTML＞
3<div class="lesson-wrapper">  
4  <div class="container"> 
5
6      <div class="yellowbracketsnarrow">
7    <div class="heading"> 
8      <h2>他のプログラミングスクールとここが違う！<br>
9          iSara[イサラ]の３つのメリット</h2>
10    </div>
11  </div>
12
13<div class="lessons"> 
14
15  <div class="lesson">  
16
17    <div class="lesson-icon"> 
18      <img src="https://isara.life/wp-content/themes/isara_v2/img/learnfromfreelancer.jpg">
19      <p>現役フリーランスから学べる</p>
20    </div>
21    <p class="text-contents">他のプログラミングスクールとは違い、実際にフリーランスとして活動しているエンジニアが直接講師を勤めます。</p>
22  </div>         
23
24  <div class="lesson">  
25    <div class="lesson-icon"> 
26      <img src="https://isara.life/wp-content/themes/isara_v2/img/learnfromprojects.jpg">
27      <p>実践を通じて学べる</p>
28    </div>
29    <p class="text-contents">フリーランスにとって最短の学習方法は「実践」。iSaraでは実案件を通して学びます。現役フリーランサーの案件サポートに加え、クラウドソーシングを活用。初心者の自分じゃ無理と思うかもですが、現役フリーランスがサポートしますので大丈夫。</p>
30  </div>
31
32  <div class="lesson">  
33    <div class="lesson-icon"> 
34      <img src="https://isara.life/wp-content/themes/isara_v2/img/actuallyfree.jpg">
35      <p>授業料が実質０円</p>
36    </div>
37    <p class="text-contents">講座費用248,000円以上の金額が稼げるまで「永久サポート延長」があります。</p>
38  </div>
39
40
41</div>            <!-- lessons -->
42
43
44</div>      <!-- container -->
45</div>      <!-- ---lesson-wrapper--- -->

CSS
1.lesson-wrapper {
2  background-color: #fef5e0;
3  text-align: center;
4  height: 580px;
5}
6
7.lesson {
8  width: 33%;
9  float: left;
10}
11
12.text-contents {
13  width: 65%;
14  display: inline-block;
15}

試したこと

デベロッパーツールの検証で確認を行い、見本と同じようにコードを組み込んでみたりしているのですが、レイアウトが崩れたりと、上手くいきません。画像を真ん中に寄せる方法等を調べて、試行錯誤しながら色々試しましたが、どうやってもlesson間の隙間をなくし、見本と同じような間隔にすることができません。

どなたか教えていただけたら幸いです。宜しくお願いいたします。

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

回答1件

ベストアンサー

こんな感じですか？

CSS
1<style>
2.lesson-wrapper {
3  background-color: #fef5e0;
4  text-align: center;
5  height: 580px;
6}
7.lessons {
8  display:flex;
9  justify-content:space-evenly;
10}
11.lesson {
12width:300px;
13}
14.text-contents {
15  width: 65%;
16  display: inline-block;
17}
18</style>
19<div class="lesson-wrapper">  
20  <div class="container"> 
21    <div class="yellowbracketsnarrow">
22      <div class="heading"> 
23        <h2>他のプログラミングスクールとここが違う！<br>
24            iSara[イサラ]の３つのメリット</h2>
25      </div>
26    </div>
27  </div>
28  <div class="lessons"> 
29    <div class="lesson">  
30      <div class="lesson-icon"> 
31        <img src="https://isara.life/wp-content/themes/isara_v2/img/learnfromfreelancer.jpg">
32        <p>現役フリーランスから学べる</p>
33      </div>
34      <p class="text-contents">他のプログラミングスクールとは違い、実際にフリーランスとして活動しているエンジニアが直接講師を勤めます。</p>
35    </div>
36    <div class="lesson">  
37      <div class="lesson-icon"> 
38        <img src="https://isara.life/wp-content/themes/isara_v2/img/learnfromprojects.jpg">
39        <p>実践を通じて学べる</p>
40      </div>
41      <p class="text-contents">フリーランスにとって最短の学習方法は「実践」。iSaraでは実案件を通して学びます。現役フリーランサーの案件サポートに加え、クラウドソーシングを活用。初心者の自分じゃ無理と思うかもですが、現役フリーランスがサポートしますので大丈夫。</p>
42    </div>
43    <div class="lesson">  
44      <div class="lesson-icon"> 
45        <img src="https://isara.life/wp-content/themes/isara_v2/img/actuallyfree.jpg">
46        <p>授業料が実質０円</p>
47      </div>
48      <p class="text-contents">講座費用248,000円以上の金額が稼げるまで「永久サポート延長」があります。</p>
49    </div>
50  </div>
51</div