gridの中身が親要素をはみ出してしまう。また、次のセクションにまではみ出て被ってしまう。

前提・実現したいこと

【前提】
WordPressの投稿から得た情報を取得しグリッドレイアウトを作成

【実現したいこと】
投稿機能で表示する。
グリッドレイアウトを崩れずに実装したい。

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

gridの中身が親要素をはみ出してしまう。
また、次のセクションにまではみ出て被ってしまう。

wrapperとulどちらも中身（li）がはみ出してしまう。

エラーメッセージ

該当のソースコード

PHP
1<section class="product">
2        <div class="common-inner">
3          <h3 class="title-jp" data-aos="fadeInUp" data-aos-duration="2000">取扱商品</h3>
4          <h4 class="title-en" data-aos="fadeInUp" data-aos-duration="1500">PRODUCT</h4>
5          <div class="wrapper">
6            <ul class="grid">
7              <?php if(have_posts(  )):while(have_posts(  )):the_post(  );?>
8                <li class="grid-li">
9                  <div class="detail-link" href="<?php the_permalink(); ?>">
10                    <div class="grid-img"><?php the_post_thumbnail('thumbnail'); ?></div>
11                    <?php $category = get_the_category(); echo $category[0]->cat_name;?>
12                    <p class="title"><?php the_title(); ?></p>
13                    <p class="news-text"><?php echo get_the_excerpt(); ?></p>
14                  </div>
15                </li>
16              <?php endwhile;?>
17              <?php endif;?>
18            </ul>
19          </div>
20        </div>
21      </section>
22

lang
1.product {
2  .wrapper {
3    margin: 100px 0 20%;
4  }
5
6  .grid {
7    display: grid;
8    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
9    gap: 5%;
10    }
11}