right-50%にして画面の外に隠そうとしても横幅が広がってしまい隠れません。

Question

どんなにright-◯◯%と書いても横幅が広くなるだけでメニューが隠れてくれません。
どうやったらメニュー部分が隠れるのかを教えていただきたいです。
よろしくお願いします。

<header>
    <div class="hd-wrap">
      <img class="hd-logo" src="img/logo.png" alt="">
      <ul class="hd-list">
        <li class="hd-item"><a href="">Card<span><i class="fas fa-angle-right"></i></span></a></li>
        <li class="hd-item"><a href="">News<span><i class="fas fa-angle-right"></i></span></a></li>
        <li class="hd-item"><a href="">Price<span><i class="fas fa-angle-right"></i></span></a></li>
        <li class="hd-item"><a href="">Access<span><i class="fas fa-angle-right"></i></span></a></li>
        <li class="hd-item"><a href="">Contact<span><i class="fas fa-angle-right"></i></span></a></li>
      </ul>
    </div>
    <div class="black-bg" id="ja-black-bg"></div>
    <div class="hum" id="js-hum">
      <span class="hum-linn hum-line-1"></span>
      <span class="hum-linn hum-line-2"></span>
      <span class="hum-linn hum-line-3"></span>
    </div>
  </header>

header {
  background: $blue;
  box-shadow: 0 3px 3px #00000029; 
  color: #fff;
}

.hd-wrap {
  display: flex;
  justify-content: space-between;
  padding: 31px 138px 30px 139px;

  @include sp {
    padding: 15px 0;
    position: relative;
  }

  .hd-logo {
    cursor: pointer;
    transition: .5s linear;
    &:hover {
      transform: rotateX(360deg);
    }
  }

  .hd-list {
    display: flex;
    justify-content: space-between;

    @include sp {
      display: block;
      position: absolute;
      right: -50%;
      top: 0;
      z-index: 200;
      background: #fff;
      width: 50%;
      height: 100vh;
      color: #707070;
    }

    .hd-item {
      margin-right: 26px;
      line-height: 39px;
      position: relative;

      @include sp {
        margin-right: 0;
      }

      a {
        display: block;
        padding: 15px 20px;
      }

      &::after {
        position: absolute;
        content: "";
        height: 3px;
        width: 100%;
        background: #E81919;
        bottom: 0;
        left: 0;
        opacity: 0;
        transition: .3s;

        @include sp {
          background: none;
          border-bottom: 1px dotted #707070;
          opacity: 1;
        }
      }
      
      &:hover::after {
        opacity: 1;
      }

      &:last-child {
        margin-right: 0;
      }

      span {
        display: none;
        @include sp {
          display: inline-block;
          position: absolute;
          right: 20px;
      
        }
      }
    }
  }
}

Comments

[kei344]

（質問文は編集できます）質問文のHTML/scssはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[Dattyo]

申し訳ございません。
コードブロックつりました。

Answer 1

position:fixed;
にしたらできました。
回答をしていただ。

Answer 2

これでどうでしょうか。

.hd-wrap {
	overflow: hidden;
}

Comments

[Dattyo]

position:fixed;
にしたらできました。
回答をしていただきありがとうございます。

[Lhankor_Mhy]

ご解決されて何よりです。
自己解決の手続きをお願いします。
https://teratail.com/help#resolve-myself

Answer 3

今回のシチュエーションでは、leftとrightは、どちらか片方を指定するのが妥当と思われます。

メニューの位置を指定している箇所は以下と認識しています。

.hd-list {
  display: flex;
  justify-content: space-between;

  @include sp {
    display: block;
    position: absolute;
    right: -50%; /* メニュー要素の右端の座標を指定 */
    top: 0;
    z-index: 200;
    background: #fff;
    width: 50%; /* メニューの横幅 */
    height: 100vh;
    color: #707070;
  }

↓メニューを表示する際のCSSは以下のようになると思います。

.hd-list {
  @include sp.active {
    right: 0; /* 座標に手を加え表示 / 非表示を制御するなら、rightで一貫してください。 */
  }
}

right: -50%;で右側にずらしたメニューの位置を、right: 0%;でキャンセルするイメージです。
(right: 0;でもかまいません。)

「rightで右側にずらしたから、元に戻すなら左側にずらすためにleftを使おう」という解釈は、よくある誤解です。

rightは要素の右端の座標を指定して、leftは左端の座標を指定するので、横幅は伸びてleftとrightの座標指定の矛盾を解決する、という理解が正しいと思います。

Comments

[Dattyo]

申し訳ございません。
leftではなく、rightにマイナスで画面の外に出したいのですが、画面の外に出そうとしても横幅が広がってしまいます。
画面が広がらない方法を教えていただきたいです。

[new1ro]

body {
overflow-x: hidden;
}
を指定するといかがでしょうか?

[Dattyo]

position:fixed;
にしたらできました。
回答をしていただきありがとうございます。

[new1ro]

解決できたようで、よかったです。