画像がくっついてしまう

下の画像のように画像を離したいのですが、くっついてしまいます。
どうしたらいいのでしょうか。

html
1<div class="main_fifth_c">
2                <div class="main_fifth_b">
3                    <img src="../images/o9.jpg">
4                    <h4>現役フリーランスから学べる</h4>
5                    <p>他のプログラミングスクールとは違い、実際にフリーランスとして活動しているエンジニアが講師を勤めます。</p>
6                </div>
7                <div class="main_fifth_b">
8                    <img src="../images/o10.jpg">
9                    <h4>実践を通じて学べる</h4>
10                    <p>フリーランスにとっての最短の学習方法は「実践」。iSaraでは実案件を通して学びます。現役フリーランサーの案件サポートに加え、クラウドソーシングを活用。初心者の自分じゃ無理と思うかもですが、現役フリーランスがサポートしますので大丈夫。</p>
11                </div>
12                <div class="main_fifth_b">
13                    <img src="../images/o11.jpg">
14                    <h4>授業料が実質０円</h4>
15                    <p>講座費用２５８,０００円以上の金額が稼げるまで「永久サポート延長」があります。</p>
16                </div>
17            </div>

scss
1.main_fifth_c{
2    display: flex;
3    justify-content: center;
4    img{
5      width: 360px;
6      height: 180px;
7    }
8    .main_fifth_b{
9      text-align: left;
10      width: 360px;
11      h4{
12        color: #ebb94d;
13        font-size: 20px;
14        margin: 0;
15      }
16      p{
17        margin-top: 10px;
18        font-size: 16px;
19        letter-spacing: 1px;
20      }
21    }
22  }

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

回答2件

ベストアンサー

.main_fifth_b{にmargin:0 16px;とかだと思います。
内側の余白＝padding
外側の余白＝margin
でざっくりと覚えてるといいかもです。

投稿2020/04/28 03:52

sunglass

総合スコア303

css
1.main_fifth_c {
2  display: flex;
3  justify-content: space-evenly; /* 変更 */
4  
5  /* 間隔を調整したいのであればwidthを変更してください */
6  /* 以下二つは書かなくても等間隔には並びます */
7  width: 1200px;
8  margin: 0 auto;
9}