ハンバーガーメニューをヘッダーの中に入れたい

Question

ハンバーガーメニューを作ってます。
headerの中にハンバーガーメニューが入るようにHTMLを書いたつもりなのですが、画像のように右に飛び出してしまいます。
headerにposition: fixed;を書いたのが原因かと思いposition: fixed;を消してみたのですが一向に改善されません。

どなたかご享受いただけないでしょうか？

  <!-- ヘッダーここから -->
    <div id="header" class="wrapper">
      <header class="header">
        <div class="header-container">
          <h1 class="header-logo">
            <a href="index.html">
              <img src="img/logo.svg">
            </a>
          </h1>
          <div id="hamburger">
            <p class="btn-gNav">
              <span></span>
              <span></span>
            </p>
            <nav id="gNav" class="gNav">
              <ul class="gNav-menu">
                <li><a href="products.html">PRODUCTS</a></li>
                <li><a href="about.html">ABOUT</a></li>
                <li><a href="company.html">COMPANY</a></li>
                <li><a href="#">CONTACT</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </header>
    </div> 
  

.wrapper {
  padding-top: 60px;
}

/* header */

.header {
  width: 1280px;
  height: 80px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 40px;
  z-index: 10;
  margin-top: 0;
  background-color: pink;
}

.header-logo {
  padding: 16px 0;
}

.header-logo img {
  width: 180px;
  height: 20px;
}

/*-- hamburger ------------------------------------*/

.header-container #hamburger .btn-gNav{
  position: fixed;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 24px;
  z-index: 3;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.header-container #hamburger .btn-gNav span{
  position: absolute;
  width: 100%;
  height: 2px;
  background: #666;
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

.header-container #hamburger .btn-gNav span:nth-child(1) {
  top:0;
}

.header-container #hamburger .btn-gNav span:nth-child(2) {
  top:10px;
}

.header-container #hamburger .btn-gNav.open span:nth-child(1){
  background: #fff;
  top: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}

.header-container #hamburger .btn-gNav.open span:nth-child(2),.header-container #hamburger .btn-gNav.open span:nth-child(3){
  top: 6px;
  background :#fff;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}

#gNav{
  position: fixed;
  top: 0;
  margin: 0;
  padding: 22px 50px;
  right: -100%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  font-size: 14px;
  box-sizing: border-box;
  z-index: 2;
}

#gNav.open{
  right: 0px;
}

#gNav .gNav-menu{
  width: 100%;
  height:100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-top: 20px;
  /*justify-content: left;*/

  animation-name: faderight;
  animation-duration: 2s;
}

@keyframes faderight {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

#gNav .gNav-menu li{
  display: block;
  padding-bottom: 14px;
}

#gNav .gNav-menu li a{
  color: #fff;
  text-decoration: none;
}

$(function() {
  $('.btn-gNav').on("click", function(){

    $(this).toggleClass('open');
    $('#gNav').toggleClass('open');
  });

});

// メニューをクリックされたら、非表示にする
$(function() {
  $('.gNav-menu li a').on("click", function(){
     $('#gNav').removeClass('open');
  });
});

Comments

[tetosept]

hamburgerに関するposition fixed; position:absolute;両方とも削除してもだめでしたか？
ちなみに削除した場合の表示は全く変わらない状況でしょうか

[mamenekomameta]

ありがとうございます。
1.position:fixed; position:absolute;両方消すとspanが表示されなくなりました。
2.position:fixed; を消しても変わりません。
3.position:absolute;を消すとspanが表示されなくなりました。

どちらも表示は残し、position:fixed;のtopとrightの値を変更したところ位置が動きました。
ありがとうございます。

Answer 1

.header-container #hamburger .btn-gNavにposition: fixed;を設定しているので、ハンバーガーメニューは画面に対して固定されています。
これをposition: absollute;にして親要素に固定するようにすればよいのではないでしょうか。

Comments

[mamenekomameta]

ありがとうございます。
やはりposition: fixedが固定されていた原因なんですね。
position: absolute;に変更したところ、問題なく移動できました。

Answer 2

1.position:fixed; position:absolute;両方消すとspanが表示されなくなりました。
2.position:fixed; を消しても変わりません。
3.position:absolute;を消すとspanが表示されなくなりました。

どちらも表示は残し、position:fixed;のtopとrightの値を変更したところ位置が動きました。
ありがとうございます。