CSSでの複数枚の画像の横並びができません。

前提・実現したいこと

現在サイトの摸写をしているのですが、画像の横並びができず困っております。画像は3枚、ばらばらのサイズのフリー画像を使っています。初心者で分からないことばかりなので、ご教授頂けると幸いです。

発生している問題・エラーメッセージ

1枚目の写真だけサイズが変わり表示されている状態です。

#【HTML】

<div id="pickup" class="wrapper"> <article> <img src="image/aircraft-370276_640.jpg" alt=""> <h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2> </article> </div> <article> <img src="image/beach-12581_640.jpg" alt=""> <h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2> </article> <article> <img src="image/camels-11403_640.jpg" alt=""> <h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2> 　</article> </div>

#【CSS】
#pickup {
display: flex;
justify-content: space-between;
padding-top: 150px;
margin-bottom: 60px;
}
#pickup article {
width: 32%;
}
#pickup .article-title {
font-size: 1rem;
margin: 10px 0 15px 0;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

画像の大きさは縦横、
640＊373
640＊359
640＊426
ピクセルです。

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

回答1件

ベストアンサー

cssでflexの使われているdivが最初に閉じられているので、下の二つの画像に適用されないのではないでしょうか？

HTML
1<div id="pickup" class="wrapper">
2<article>
3<img src="image/aircraft-370276_640.jpg" alt="">
4<h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
5</article>
6
7<article>
8<img src="image/beach-12581_640.jpg" alt="">
9<h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
10</article>
11
12<article>
13<img src="image/camels-11403_640.jpg" alt="">
14<h2 class="article-title">タイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
15</article>
16</div>