【css】レスポンシブ時にgridエリアがはみ出てしまう

gridレイアウト実装中、
レスポンシブの設定を行っているのですが、
grid部分が親からはみ出てしまいます。

html
<div id="grid-show">
  <div id="left-image">
    <div class="title">
      <h3>タイトル</h3>
  　</div>
  </div>
  <div class="image">画像</div>
  <div id="left-content">コンテンツ</div>

  <div class="sidebar">
     <div class="sidebar-title">
       <h3 class="side-t">タイトル</h3>
     </div>
     <div class="side-contents">コンテンツ</div>
  </div>
</div>

css

#grid-show {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 2fr 1fr;
  justify-content: center;
  grid-template-areas: 
  "image sidebar"
  "content sidebar";
  grid-gap: 1rem;
  width: 80%;
  margin: 0 auto;
}

css responsive

@media (max-width: 670px) {
  #grid-show {
    width: 100%;
    box-sizing: border-box;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 
      "image"
      "content"
      "sidebar"
      "sidebar";
}}

試したこと
親要素にbox-sizingを入れたり
overflow: hiddenを入れてみたいしたのですが、
どうしてもヘッダーとフッターからはみ出てしまいます。
ブラウザで幅を狭くする分にははみ出ないのですが、
cromeの検証ツールから、iphoneXなどのスマホサイズを選択するとはみ出てしまいます。
herokuへデプロイして見てもはみ出てしまっている状態です。

レイアウトにお詳しい方、ご教授お願いできませんでしょうか。
よろしくお願い致します。