一部のiPhoneで画面を回転させて戻すと余白が発生する

もともとPC版のレイアウトのみ想定してコーディングされたWebページに、スマホ版デザインを追加する作業を請け負いました。
通常の表示は問題ないのですが、以下の特定の画面切り替えをするとレイアウトが崩れます。

【レイアウト崩れが発生する状況】
①iPhoneXなどでラウンドスケープモード(画面を横に)で表示
②縦表示に戻す
と表示を切り替えると②の時にレイアウトの崩れが発生します。

【どういう崩れ方をするか？】
・全体的に左右に余白が表示される
・スクロールすると要素がすべて左に寄って、右側に余白が残る

【検証したこと・やってみたこと】
・GoogleChromeのデベロッパーツール上では問題なく表示されます。iPhoneの実機で検証すると発生しています。

・スマホ表示用のCSSにwidthをすべて指定

してみましたが解決しません。
原因に考えられること、解決方法などあれば教えて頂きたいです。

文字数の関係ですべてのコードが入力できないため、index.htmlのHTMLのみ記載します。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>一部のiPhoneで画面を回転させて戻すと余白が発生する</title>
<link type="text/css" href="style.css" rel="stylesheet"/>
<link type="text/css" href="mobile_style.css" rel="stylesheet"/>
<script src="./js/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div id="pc_container">
  <!-- header　-->
    <div id="header">
      <h1 class="pc_only"><a href="index.html">タイトル</a></h1>
      <ul class="pc_only">
        <li><a id="tel" href="inquiry.html">電話：XXXXXXXXX</a></li>
      </ul>
      <ul class="pc_only">
        <li><a id="inquiry" href="inquiry.html">お問い合わせ</a></li>
      </ul>
      <div class="sp_only" id="access_sp_btn"><a href="#access_sp"><p>アクセス</p></a></div>
    </div>
  <!-- headerここまで　-->

  <!-- Lower-barここから-->
  <div class="sp_only lower_bar">
  <div class="ttl">
    <h3>無料体験レッスン受付中！</h3>
  </div>
  <div class="btn">
    <div class="tel_btn">
      <a href="tel:00000000"><span>電話問い合わせ</span></a> 
    </div>
  <div class="mailform_btn">
      <a href="inquiry.html"><span>メール問い合わせ</span></a>
  </div>
  </div>
  </div>
  <!-- Lower-barここまで　-->

  <!-- main　-->
  <div id="sp_container">
    <div id="main">
      <h1 class="logo sp_only"><a href="index.html"><img src="./img/logo.png" alt="ロゴ"></a></h1>
      <img src="img/main-img.jpg" alt="XXX">
    </div>
  <!--  menu　-->	
  <div class="navmenu drawer">
      <input type="checkbox" id="drawer-check" class="drawer-hidden">
      <label for="drawer-check" class="drawer-open"><span></span><p class="sp_only">メニュー</p></label>
    <div id="navi" class="drawer-content">
    <ul class="drawer-list">
      <li class="m1 drawer-item"><a href="index.html">ホーム</a></li>
      <li class="m2 drawer-item"><a href="class.html">教室の案内</a></li>
      <li class="m3 drawer-item"><a href="ukulele.html">Aレッスン</a></li>
      <li class="m4 drawer-item"><a href="piano.html">Bレッスン</a></li>
      <li class="m5 drawer-item"><a href="teacher.html">講師プロフィール</a></li>
      <li class="m6 drawer-item"><a href="inquiry.html">お問い合わせ</a></li>
    </ul>
    </div>
    </div>
  <!--   menuここまで　-->
  
  <div id="left">
  <!-- about　-->
  <div id="about">
    <div class="pc_only">
      <h2><span>無料体験レッスン</span></h2>
      <p>無料体験レッスン受付中！オンラインレッスンも可能！まずは気軽にお問い合わせください。<br>
      TEL:000000000
      </p>
      <a href="tel:00000000"><p>電話でお問い合わせ</p></a>
      <a href="inquiry.html"><p>メールフォームでお問い合わせ</p></a>
      <p></p>
    </div>
    <div class="sp_only">
      <h2>無料体験レッスン受付中！<p>お問い合わせはこちら</p></h2>
      <div class="inquiry_btn">
        <a class="tel_btn" href="tel:00000000">
          <p><img src=".//img/tel_icon.png" alt="">電話</p><p>00000000</p></a>
          <a class="mail_btn" href="inquiry.html"><p><img src=".//img/mail_icon.png" alt="">メールフォーム</p></a>
        </div>
      </div>
    </div>
<!-- access　PC版-->
  <div id="access" class="pc_only">
  <h2>アクセス</h2>
  <p>
     〒〇〇-〇〇<br>
  東京都〇〇〇〇<br>
  TEL:00000000<br>
    <br>
    ・東京メトロ南北線<br>
    　〇〇駅より徒歩◯分<br>
    ・JR京浜東北線<br>
    　〇〇駅より徒歩◯分<br>
  </p>
    <p>
      <a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1620.2464741746212!2d139.7112993083519!3d35.689485223513884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ce9cc315b03%3A0xe99f6c02ec60470e!2z44CSMTYwLTAwMjIg5p2x5Lqs6YO95paw5a6_5Yy65paw5a6_77yR5LiB55uu!5e0!3m2!1sja!2sjp!4v1612088259052!5m2!1sja!2sjp" target="_blank">地図を表示する</a>
    </p>
  </div>
  <!-- access　PC版 ここまで　-->
  </div>
  
<!-- Right ここから　-->
<div id="right">
<!-- Main contents　-->
<div class="right_contents">
<h2>タイトル</h2>
<h3>サブタイトル</h3>
<div class="sp_content_reverse">
  <p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
  <img class="sp_only" src="img/test1.jpg" alt="">
</div>
</div>  
<!-- movieここまで　-->
<!-- access　スマホ版-->
<div id="access_sp" class="sp_only">
<h2>アクセス</h2>
<p>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1620.2464741746212!2d139.7112993083519!3d35.689485223513884!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188ce9cc315b03%3A0xe99f6c02ec60470e!2z44CSMTYwLTAwMjIg5p2x5Lqs6YO95paw5a6_5Yy65paw5a6_77yR5LiB55uu!5e0!3m2!1sja!2sjp!4v1612088259052!5m2!1sja!2sjp" width="100%" height="300" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
  <div class="address">
<p>
  〒〇〇-〇〇<br>
  東京都〇〇〇〇<br>
  TEL:00000000<br>
  <br>
</p>
<p>
   ・東京メトロ南北線<br>
    　〇〇駅より徒歩◯分<br>
    ・JR京浜東北線<br>
    　〇〇駅より徒歩◯分<br>
</div>
  </div>
</p>
<!-- access　スマホ版 ここまで　-->
</div>
<!-- footer　-->
<div id="footer">
<br><br>
<p><a href="index.html">トップページ</a>
<a href="http://a-universe.jp/profile" target="_blank">会社概要</a>
<a href="inquiry.html">お問い合わせ</a></p>
<br>
copyright (c) 2012 xxxxx All rights reserved.
</div>
<!-- footerここまで　-->
</div>
</div>
  </body>
</html>