CSSのバーガーメニューをスマホで全画面表示にしたい

Question

前提・実現したいこと

CSSで作成したハンバーガーメニューをスマホ版にした際、画面いっぱいに広がる幅がうまくできません。PC版では500pxの幅ですが、スマホは端末に合った幅で全画面表示したいです。

該当のソースコード

<!-- ドロワーメニュー -->
<div class="drawer">
    <input class="drawer_checkbox" id=“drawerCheckbox” type="checkbox">

    <!-- ドロワーアイコン部分 -->
    <label class="drawer_icon" for=“drawerCheckbox”>
        <span class="drawer_icon_item navToggle">
            <span class="menu_span">MENU</span>
        </span>

    </label>


    <!-- 背景を暗く -->
    <label class="drawer_overlay" for=“drawerCheckbox”></label>


    <nav class="drawer_menu" id="globalMenuSp">
        <ul id="menu">
            <a href="" class="menu_sp_logo"><img src="images/menu_sp_logo.png" alt=""></a>
            <li><a href=""></a></li>
            <li><a href="">お知らせ</a></li>
            <li><a href="">お知らせ</a></li>
            <li><a href="">お知らせ</a></li>
            <li><a href="">お知らせ</a></li>
            <li><a href="">プライバシーポリシー</a></li>

        </ul>
    </nav>
</div>

menu_sp_logo {
  width: 90px;
  height: auto;
}

.drawer_icon {
  display: block;
  width: 60px;
  height: 60px;
  position: fixed;
  top: 10px;
  right: 2%;
  cursor: pointer;
  z-index: 400;
}

.drawer_icon_item, .drawer_icon_item::before, .drawer_icon_item::after {
  background-color: #306294;
  display: block;
  width: 26px;
  height: 2px;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}


.drawer_icon_item::before {
  content: '';
  top: 16px; 
  left: -10px;

}

.drawer_icon_item::after {
  content: '';
  top: -16px;
  left: 6px; 

}

.menu_span {
  font-size: 10px;
  position: relative;
  top: 4px;
  left: -3px;
}



.menu_span:checked {
  content:"CLOSE";
  transform: translateY(0) rotate(-45deg);
  top:5px;
  left:4px;
}



.drawer_overlay {
  background: #333;
  opacity: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 2;
}

.drawer_checkbox:checked ~ .drawer_overlay {
  opacity: 0.3;
  pointer-events: auto;
}



.drawer_menu {
  background: #fff;
  opacity: 0.9;
  color: #306294;
  max-width: 100%;
  width: 500px;
  height: 100vh;
  position: fixed;
  top: 0;
  right: -500px;
  z-index: 80;
}

.drawer_checkbox:checked ~ .drawer_menu {
  right: 0;
}

.drawer_checkbox:checked ~ .drawer_icon .drawer_icon_item {
  background: transparent;
}

.drawer_checkbox:checked ~ .drawer_icon .drawer_icon_item::before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 0;
  left: 1px;
}

.drawer_checkbox:checked ~ .drawer_icon .drawer_icon_item::after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0;
  left: 1px;
}

.drawer_icon_item,
.drawer_icon_item:after,
.drawer_icon_item:before,
.drawer_overlay,
.drawer_menu {
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  transition: all 0.7s;
}

.drawer_menu {
  text-align: center;
}

.drawer_menu ul {
  width: 500px;
  text-align: left;
  margin: 50px auto 0;
}

.drawer_menu ul li {
  font-size: 18px;
  padding-bottom: 36px;
}

.drawer_menu ul li a {
  text-decoration: none;
  color: #333;
  display: flex;
  flex-direction: column;
}


.drawer_menu span {
  font-size: 16px;
}

試したこと

とても初心者なのですが、cssでバーガーメニューを見様見真似で作ってみました。幅の500pxを単純に100vwなどとしてみたのですが、メニューが右側にはみ出してしまう状態です。

補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。

Comments

[K_3578]

質問文見る前に少しだけ質問文の書き方について。
前提・実現したいこと,該当のソースコード　等の見出しは
見出しにしたい部分選択して「H」(見出し)っていうの押したらサイズ変わるので編集で変えてみて下さい。

[shiro555]

ご指摘ありがとうございます。大変失礼いたしました。修正いたします。

[K_3578]

後、一つだけ。過去質問見た感じ、最初の質問だけ基本テンプレートで書かれているので
（確か最初の質問はデフォルトで基本テンプレートが適用されているんだったかな？）
以降の質問作成時に基本テンプレート使いたい場合は太字とか見出しとかある所の右端に
「基本テンプレート」ってボタンがあるのでそれ押せば基本テンプレートが自動で出来ます。
参考にどうぞ。

[shiro555]

確かに初めはあったのですが後からなくなっていました・・・！基本テンプレート今度から使用してみます。ありがとうございます！

[K_3578]

考えてはみますが、自分はcssそこまで得意じゃないので、ご自分でもお調べになってください。
(他の回答者の方に回答して貰った方が早い気がする)

Answer 1

下記が一番簡単かな。

.drawer_menu ul {
/*  width: 500px; 削除 */
  max-width: 500px; /* 追加 */
  text-align: left;
  margin: 50px auto 0;
}

画面幅500px以下のときは、画面幅と同じ幅になります。

Comments

[shiro555]

こういう時のmax-widthなんですね、、！ありがとうございますT T
ちなみに、中のメニューの上下に区切り線を入れたいのですが、区切り線の右端が右側に突き抜けてしまうので、内側にwidth:〇%の囲みを作るようなイメージでしょうか？