CSS グリットレイアウト　子要素を親要素の中に収めたい

前提・実現したいこと

CSSグリットレイアウトを使って３列３行9つのメニューのタイル型レイアウトを作っています。
header部分、コンテンツ部分（タイルレイアウト）、footer部分の構造です。

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

全体のレイアウトからコンテンツのタイルレイアウトが飛び出して、うまく収まりません。
下記タイルレイアウトのコードと画像を添付致します。

html

<body> <div id="menu" class="big-bg"> <header class="page-header wrapper"> <h1><a hrel="index.html"><img class="logo" src="fullscreenimages/logo.svg" alt="WCBカフェホーム"></a></h1> <nav> <ul class="main-nav"> <li><a href="news.html">news</a></li> <li><a href="menu.html">menu</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> </header> <div class="menu-content wrapper"> <h2 class="page-title">Menu</h2> <p>体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。おいしいブレンドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。 </p> </div> </div> 　<div class="wrapper grid"> <div class="item"> <img src="fullscreenimages/menu1.jpg" alt="menu1"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu2.jpg" alt="menu2"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu3.jpg" alt="menu3"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu4.jpg" alt="menu4"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu5.jpg" alt="menu5"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu6.jpg" alt="menu6"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu7.jpg" alt="menu7"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu8.jpg" alt="menu8"> <p>写真キャプション写真キャプション写真キャプション</p> </div> <div class="item"> <img src="fullscreenimages/menu9.jpg" alt="menu9"> <p>写真キャプション写真キャプション写真キャプション</p> </div> </div> 　<footer> <div class="wrapper"><p><small>© 2021 shinobox</small></p></div> </footer> </body>

CSS
html {
font-size: 100%;
}

body {
font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角 Pro W3",sans-serif;
color: #432;
line-height: 1.7;
}

a {
text-decoration: none;

img {
max-width: 100%;
}
}

.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}
.big-bg {
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
.grid {
display: grid;
gap: 26px;
grid-template-columns: repeat(3, 1fr);
margin-top: 6%;
margin-bottom: 50px;
}