要素が横並びにならない

Question

実現したいこと

.top-article-elements内の要素（3つ）を横並びに表示させたい。

発生している問題・分からないこと

display: flex;を設定しているが、横並びにならない。（縦並びのまま）

該当のソースコード

<section class="blog-section">
    <div class="big-title">
      <h2>代表のつぶやき</h2>
      <img class="separation-line" src="assets/img/separation-line.png" alt="セパレートライン">
    </div>

    <div class="top-article-elements">
     <!-- 記事01 -->
     <div  class="top-article">
      <div class="date-and-category">
        <h3>2023.06.30</h3>
        <p class="category-name">新着情報</p>
      </div>
      <h3 class="article-title">ホームページを公開しました</h3>
      <iframe  src="https://www.youtube.com/embed/7r-8ADpDd_w?si=Z21Zx7eFrx0IIP63" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>     </div>
     </div>

     <!-- 記事02 -->
     <div  class="top-article">
      <div class="date-and-category">
        <h3>2023.06.30</h3>
        <p class="category-name">ブログ</p>
      </div>
      <h3 class="article-title">憧れのキャンピングカー！</h3>
      <iframe src="https://www.youtube.com/embed/7r-8ADpDd_w?si=Z21Zx7eFrx0IIP63" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>     </div>
     </div>

     <!-- 記事03 -->
     <div  class="top-article">
      <div class="date-and-category">
        <h3>2023.06.30</h3>
        <p class="category-name">新着情報</p>
      </div>
      <h3 class="article-title">介護タクシー案内所に掲載中</h3>
      <iframe src="https://www.youtube.com/embed/7r-8ADpDd_w?si=Z21Zx7eFrx0IIP63" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>     </div>
     </div>
    </div>

    <!-- 記事一覧ボタン -->
    <div class="bt-more-blog">
      <button><a href="blog.html">一覧へ　＞</a></button>
    </div>
   </section>

.top-article-elements {
  display: flex;
  gap: 2rem; // 間隔つけるとキレイ
  flex-wrap: wrap; // スマホ対応で折り返しもさせるなら
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

依然として変わらない。

補足

特になし

Answer 1

HTMLの開始タグと終了タグの対応がおかしいです。

top-article-elements と top-article が下記のような構造になるように修正してください。

    <div class="top-article-elements">
        <!-- 記事01 -->
        <div class="top-article">

              <!-- 中略 -->

        </div>

        <!-- 記事02 -->
        <div class="top-article">

              <!-- 中略 -->

        </div>

        <!-- 記事03 -->
        <div class="top-article">

              <!-- 中略 -->

        </div>
    </div>

Answer 2

単純にdivの閉じタグが多いです

</iframe>     </div>
↓↓↓
</iframe>