横並びにならない原因が分からない

サイトの模写をしていますが、３つの画像(pc2.jpg)を横並びにするところが
うまくいきません。
指定の仕方が間違っているのかと思い調べ指定場所を変更しましたが
上手くいきません。
原因と解決策を教えて頂けると助かります。

コードHTML↓
<div>
<section class="big-inner7">
<h2>他のプログラミングスクールとここが違う!<br>iSara[イサラ]の３つのメリット</h2>
<div class="merit0">
<div class="merit"><img src="../images/pc2.jpg"></div>
<h3>現役フリーランスから学べる</h3>
<P>他のプログラミングスクールとは違い、実際にフリーランスとして活動しているエンジニアが直接講師を勤めます。</P>

<div class="merit"><img src="../images/pc2.jpg"></div>
<h3>実践を通じて学べる</h3>
<p>フリーランスにとって最短の学習方法は「実践」。iSaraでは実案件を通して学びます。現役フリーランサーの案件サポートに加え、クラウドソーシングを活用。初心者の自分じゃ無理と思うかもですが、現役フリーランスがサポートしますので大丈夫。</p>

<div class="merit"><img src="../images/pc2.jpg"></div>
<h3>授業料が実質０円</h3>
<P>講座費用248,000円以上の金額が稼げるまで「永久サポート延長」があります。</P>

</div>
<section>
<h3>さらに！帰国後もサポート付き</h3>
<p>リモートワーカーのチームを作ることで受注率、受注単価が大幅に向上します。</p>
<P>iSaraは講座が終わって終了ではありません。<br>参加メンバーのチャットグループを作り、帰国後も継続的に案件参加できるようになります。<br>
また、チームで働くことで継続的に稼ぎやすい仕組みづくりも構築しております。</P>
</section>
<p>事前課題ができない人はお断りしております。iSaraでは、無料で学べるプログラミング基礎知識は教えません。事前課題一覧はメールで送りつつ<br>
チャットサポートのみ。従って、本気で取り組まないと結果は出ません。 </p>
</section>     
</div>

コードCSS↓

.big-inner7{
    background-color: #fef5e0;
    
}
.big-inner7 h2{
    font-size:24px;
    font-weight: 600;
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
  justify-content: center;
  align-items: center;
  }



.big-inner7 h2:before{
    content:'『';
    color: #EBB94C;
    margin: 80px;
    font-size: 250%;
}

.big-inner7 h2:after{
    content:'』';
    color: #EBB94C;
    margin: 80px;
    font-size: 250%;
}

---↓ここの指定が上手くいきません。↓---

.merit{
    display:flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 20% 20px !important;
}

試したこと

<div class="merit0"> に横並びを指定する

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

回答1件

ベストアンサー

Flexbox を使って要素を横並びにしたいのならば、それらを囲うコンテナが必要です。
横並びにしたい要素そのものにflexは指定しません。親要素にflexを指定します。

単に画像を Flexbox を使って横並びにしたいのならば以下のようにします。

html
1<div class="flex-container">
2	<img src="../images/pc2.jpg">
3	<img src="../images/pc2.jpg">
4	<img src="../images/pc2.jpg">
5</div>

css
1.flex-container {
2	display: flex;
3	justify-content: center; // 中央寄せ
4}
5

ご覧の通り、子要素には特に指定してません。もちろん子要素に指定できるFlexboxのプロパティもあります。

質問者が模写しているサイトにおいては、該当の箇所では画像が横並びというよりは、
画像と見出しと文章の１まとまりが横に３つ並んでいるという感じに見受けられます。

ですので、最終的には以下のようにすると良いでしょう。

html
1<section>
2	<h2>他のプログラミングスクールとここが違う！<br>iSara[イサラ]の３つのメリット</h2>
3	<div class="flex-container">
4		<article>
5			<img src="../images/pc2.jpg">
6			<h3>現役フリーランスから学べる</h3>
7			<p>他のプログラミングスクールとは違い、実際にフリーランスとして活動しているエンジニアが直接講師を勤めます。</p>
8		</article>
9		<article>
10			<img src="../images/pc2.jpg">
11			<h3>現役フリーランスから学べる</h3>
12			<p>他のプログラミングスクールとは違い、実際にフリーランスとして活動しているエンジニアが直接講師を勤めます。</p>
13		</article>
14		<article>
15			<img src="../images/pc2.jpg">
16			<h3>現役フリーランスから学べる</h3>
17			<p>他のプログラミングスクールとは違い、実際にフリーランスとして活動しているエンジニアが直接講師を勤めます。</p>
18		</article>
19	</div>
20</section>

scss
1.flex-container {
2
3	display: flex;
4	justify-content: space-between; // 間隔を開けて配置
5	width: 900px; // 横幅は適宜変更して下さい
6	margin: 0 auto;
7
8	article {
9
10		width: 250px; // 横幅は適宜変更して下さい
11
12		img {
13			display: block;
14			width: 100%;
15			height: auto;
16		}
17	}
18}
19