要素がはみ出すことについて。

デザインカンプから模写をしています。
ハンバーガーメニューをクリックすると、メニュー一覧が表示されるメニューバーを作ろうとしています。
クリック後のメニュー画面が、なぜか親要素を超えてしまい、大きくはみ出してしまいます。
全て相対指定しているのに、はみだしている意味が分かりません。
どのようにすれば、親要素におさまるのでしょうか？
このメニュー画面のせいで、右側に大きな余白が出てしまっているようです。
メニュー画面の右上にあるバツ印が、親要素の幅の目安です。

問題個所の二点を画像としてアップしておりますが、より分かりやすくするために、こちらにサイトをアップロードしました。ご確認のほどお願いいたします。

メニュー画面のはみだしをなくして、右側に出ている余白を直したいです。
試しにヘッダーを全て消去したり、メニュー画面を消去したりしても、右側の余白が消えませんでした。本当に謎です。
よろしくお願いいたします。

試したこと

絶対指定がないか確認しました。

    <div class="header">
        <img src="/images/SP-TOP/backimg-menu.png" alt="" class="header-img-active">
        <a href="index.html" class="header-top">PON DESIGN</a>
    
        <!-- メニュー(PC) -->
        <header class="header-nav">
            <nav>
                <ul class="nav-list">
                    <li class="nav-item">
                    <a href="/news/news.html">NEWS</a>
                    </li>
                    <li class="nav-item">
                    <a href="/service/service.html">SERVICE</a>
                    </li>
                    <li class="nav-item">
                    <a href="/works/works.html">WORKS</a>
                    </li>
                    <li class="nav-item">
                    <a href="/company/company.html">COMPANY</a>
                    </li>
                    <li class="nav-item">
                    <a href="/recruit/recruit.html">RECRUIT</a>
                    </li>
                    <li class="nav-item">
                    <a href="/contact/contact.html">CONTACT</a>
                    </li>
                </ul>
            </nav>
        </header>
        

        <!-- トップセクション -->
        <div class="title">
                <h1 class="title-tx">WEB DESIGN SPECIALIST</h1>
                <p class="title-lead">お客様の夢を叶えるWebサイトを制作</p>
            <div class="btn-contact">
                <a href="/contact/contact.html">CONTACT</a>
            </div>
            <div class="scroll">
                SCROLL
                <div class="border">
                    <!-- borderの擬似要素 -->
                </div>
            </div>
        </div>

        <!-- ハンバーガーメニュー -->
        <header id="header">
            <div class="menu-btn">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <nav class="gnavi__sp-style">
                <ul>
                    <li><a href="/news/news.html">NEWS</a></li>
                    <li><a href="/service/service.html">SERVICE</a></li>
                    <li><a href="/works/works.html">WORKS</a></li>
                    <li><a href="/company/company.html">COMPANY</a></li>
                    <li><a href="/recruit/recruit.html">RECRUIT</a></li>
                    <li><a href="/contact/contact.html">CONTACT</a></li>
                </ul>
            </nav>
            </header>
    </div>

コード

.header-nav {
  display: none;
}
.header {
    background-image: url('/images/SP-TOP/hero@2x.jpg');
    background-size: cover;
    height: 812px;
  
      .header-top {
          color: white;
          display: block;
          width: 130px;
          font-size: 18px;
          font-weight: bold;
          padding: 20px 0 0 15px;
          text-decoration: none;
      }
  
      .header-top:hover {
        opacity: 0.8;
      }
  
      .header-active {
          display: none;
      }    
  
      .header-img-active {
        display: none;
      }
  
      .header-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        background: #fff;
      }
      #header{
        .gnavi__sp-style {
          display: none;
        }
        @media screen and (max-width: 1150px) {
        .gnavi__sp-style {
          display: block;
        }
        
        /*メニューボタン　展開前*/
        .menu-btn {
          display : block;
          position: absolute;
          z-index: 3;
          right: 30px;
          top: 20px;
          width: 42px;
          height: 42px;
          cursor: pointer;
          text-align: center;
        }
        .menu-btn span {
          display : block;
          position: absolute;
          width: 30px;
          height: 2px ;
          left: 6px;
          background: white;
          transition: 0.3s ease-in-out;
        }
        .menu-btn span:nth-of-type(1) {
          top: 10px;
        }
        .menu-btn span:nth-of-type(2) {
          top: 20px;
        }
        .menu-btn span:nth-of-type(3) {
          top: 30px;
        }
          
        /*メニューボタン　展開後*/
        .menu-btn.active span:nth-child(1) {
          top: 16px;
          left: 6px;
          background :#fff;
          transform: rotate(-45deg);
        }
        .menu-btn.active span:nth-child(2),
        .menu-btn.active span:nth-child(3) {
          top: 16px;
          background :#fff;
          transform: rotate(45deg);
        }
        
        /*スマホ用のメニュー*/
        .gnavi__sp-style {
          position: fixed;
          z-index: 2;
          top: 0;
          left: 0;
          color: #fff;
          background: url("/images/SP-TOP/backimg-menu@2x.png");
          text-align: center;
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: opacity .6s ease, visibility .6s ease;
          display: flex;
          align-items: center;
        }
        .gnavi__sp-style ul {
          margin: 0 auto;
          padding: 0;
          width: 100%;
        }
        .gnavi__sp-style ul li {
          list-style-type: none;
          padding: 0;
          width: 100%;
          transition: .4s all;
        }
        .gnavi__sp-style ul li:last-of-type {
          padding-bottom: 0;
        }
        .gnavi__sp-style ul li:hover{
          background :#ddd;
        }
        .gnavi__sp-style ul li a {
          display: block;
          color: #fff;
          padding: 1em 0;
          text-decoration :none;
        }
        .gnavi__sp-style a:hover {
          color: black;
        }
        .gnavi__sp-style.active {
          opacity: 1;
        }
        }
      }    
  }


コード

hatena19

2021/02/27 07:31

CSSが途中からになっていると思いますので、先頭部分も含めてください。あと、SCSSだと思いますので、タグにSCSSを追加してください。

Goethe

2021/02/27 07:36

すみません、cssの修正をしました。scssのタグが見当たらなかったので、追加できませんでした。ご指摘ありがとうございます。

hatena19

2021/02/27 09:40

すみません。SCSSはないですね。sassならありますのでそれを追加してもらうといいと思います。

Goethe

2021/02/27 09:42

修正いたしました。

hatena19

2021/02/27 09:47

リンク先をみてみましたが、質問のものとは、レイアウトもコードも別物のようにみえますが。ハンバーガーメニューも見当たらないし。

Goethe

2021/02/27 13:12

すみません、色々いじってしまって、修復に手間取っていました。申し訳ございません。

行動規範の内容に同意します

回答1件

サイト確認させていただきました。
実機では未確認ですが、検証ツールだと綺麗に見えますよ。
ハミ出てません。

ご自身で修正されて原因が分かっている場合は、
他の人のためにどうやって解決したのか追記していただけると非常に助かります。
お手数おかけしますがよろしくお願い致します。

投稿2021/02/27 12:43

退会済みユーザー

総合スコア0

Goethe

2021/02/27 13:16

回答ありがとうございます。自分が所有するandroidだと、トップページの右側に大きな余白が出来ています。右にスワイプすると余白が出ます。知り合いのiPhoneで確認したところ、iPhoneだと正常のようです。また検証ツールでも、余白が出ています。検証ツールはchromeで行っているのですが、androidで確認すると、サイトをchromeに切り替えるとハンバーガーメニューさえ消えてなくなってしまいます。ハンバーガーメニューのcssが無効になっているようです。アップロードしたサイトで検証ツールを使って確認すると余白が出るのですが、HTMLのローカル環境で確認すると、正常に動作します。色々と複雑で訳が分からない状態です。

退会済みユーザー

2021/02/28 04:11

androidで崩れるとのことでしたので、当方が所有している安価な端末で確認してみましたが、右側にスクロールバーより少しだけ広い隙間が空くのと、ハンバーガーメニューを開いてスクロールさせるとXが上に逃げてしまう現象を確認しました。 androidは端末によって仕様や挙動が異なるようなので、実機検証に限界があります。同じ端末を持っている人に気づいてもらえるように端末情報を追記されてはいかがでしょうか。

行動規範の内容に同意します