ドロワーメニュー（ハンバーガーメニュー）で左配置にすると文字がうまく表示されない

実現したいこと

（画像１）

（画像２）

（画像３）

現状、画像１と２のようになります。
これを、画像３のように左側からドロワーメニューを出しつつ、メニューリストは左揃えで配置したいですが、CSSのどこをどういじればいいのかが分かりません。

＜下記ソースの★部分の説明＞
ドロワーメニューを、右側から出すか左側から出すかを切替できます。

＜下記ソースの■部分の説明＞
画像３で付与したtext-rightの場所を指しています。

発生している問題・分からないこと

「実現したいことを教えてください」を参照してください。

該当のソースコード

HTML
1<!doctype html>
2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
8    <link href="https://use.fontawesome.com/releases/v6.0.0/css/all.css" rel="stylesheet">
9    <title></title>
10    <style>
11        .menu-btn {
12            top: 0;
13            right: 1px;
14            display: flex;
15            justify-content: center;
16            align-items: center;
17            z-index: 90;
18            background-color: transparent;
19        }
20
21        .menu-btn span,
22        .menu-btn span:before,
23        .menu-btn span:after {
24            content: '';
25            display: block;
26            height: 5px;
27            width: 25px;
28            border-radius: 5px;
29            background-color: red;
30            position: absolute;
31        }
32
33        .menu-btn span:before {
34            bottom: 8px;
35        }
36        .menu-btn span:after {
37            top: 8px;
38        }
39
40        #menu-btn-check {
41            display: none;
42        }
43
44        .menu-content {
45            width: 100%;
46            height: 100%;
47            position: fixed;
48            top: 0;
49
50            /*★ >>>>>>>>>>>>>>>>>>*/
51            /*left: 100%;*/
52            right: 100%;
53            /*<<<<<<<<<<<<<<<<<<<<*/
54
55            z-index: 80;
56            background-color: white;
57            transition: all 0.5s;
58
59            overflow: scroll;
60            -webkit-overflow-scrolling: touch;
61        }
62
63        .menu-content ul li {
64            border-bottom: solid 1px lightgray;
65            list-style: none;
66        }
67
68        .menu-content ul li a {
69            display: block;
70            width: 100%;
71            font-size: 15px;
72            box-sizing: border-box;
73            color:#000;
74            text-decoration: none;
75            padding: 19px 25px 20px 10px;
76            position: relative;
77        }
78
79        .menu-content ul li a::before {
80            content: "";
81            width: 7px;
82            height: 7px;
83            border-top: solid 2px #ffffff;
84            border-right: solid 2px #ffffff;
85            transform: rotate(45deg);
86            position: absolute;
87            right: 52%;
88            top: 16px;
89        }
90
91        #menu-btn-check:checked ~ .menu-content {
92            /*★ >>>>>>>>>>>>>>>>>>*/
93            /*left: 50%;*/
94            right: 50%;
95            /*<<<<<<<<<<<<<<<<<<<<*/
96        }
97        .close {
98            width: 100%;
99            height: 100%;
100            position: fixed;
101            top: 0;
102            left: 100%;
103            z-index: 50;
104            background-color: gray;
105        }
106
107        #menu-btn-check:checked ~ .close {
108            left:0;
109        }
110    </style>
111</head>
112<body class="">
113    <div id="app">
114        <nav class="navbar navbar-expand-md navbar-light shadow-sm bg-white fixed-top">
115            <div class="container justify-content-center">
116                <div class="row col-xl-10 pl-0 pr-0">
117                    <div class="col-12 pl-0 pr-0">
118                        <div class="row">
119                            <div class="col-4">
120                                <ul class="nav list-inline">
121                                    <div class="hamburger-menu">
122                                        &emsp;
123                                        <input type="checkbox" id="menu-btn-check">
124                                        <label for="menu-btn-check" class="menu-btn"><span></span></label>
125                                        <label for="menu-btn-check" class="close"></label>
126
127                                        <div class="menu-content text-right"><!-- ■ -->
128                                            <ul>
129                                                <li>
130                                                    <a class="" href="">メニューいち</a>
131                                                </li>
132                                                <li>
133                                                    <a class="" href="">メニューに</a>
134                                                </li>
135                                                <li>
136                                                    <a class="" href="">メニューさん</a>
137                                                </li>
138                                                <li>
139                                                    <a class="" href="">メニューし</a>
140                                                </li>
141                                                <li>
142                                                    <a class="" href="">メニューじゅうさん</a>
143                                                </li>
144                                            </ul>
145                                            <div class="mt-5">
146                                                <p class="mt-5 ml-4">
147                                                    <a class="m-0" href="">コメントいち</a>
148                                                    <a class="" href="">コメントに</a>
149                                                    <a class="" href="">コメントさん</a>
150                                                </p>
151                                            </div>
152                                        </div>
153                                    </div>
154                                </ul>
155                            </div>
156                        </div>
157                    </div>
158                </div>
159            </div>
160        </nav>
161    </div>
162</body>
163</html>
164

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

本ソースは昔契約していた協力ワーカー様が作成したものですが、現在はすでに契約満了で離任しており、連絡がつかない状態です。
メンバー内にはWEBデザイナーがおらず、フロントエンドに明るいエンジニアがいないのでここで質問させて頂きました。

補足

特になし

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

回答1件

ベストアンサー

以下のクラスの定義をいかに書き換えればできるとは思いますけど、
コードを書き直すことも検討できる

    .menu-content {
        /* width: 100%; */
        width: 52%;
        height: 100%;
        position: fixed;
        top: 0;

        /*★ >>>>>>>>>>>>>>>>>>*/
        /*left: 100%;*/
        right: 100%;
        /*<<<<<<<<<<<<<<<<<<<<*/

        z-index: 80;
        background-color: white;
        transition: all 0.5s;

        overflow: scroll;
        -webkit-overflow-scrolling: touch;
    }

投稿2024/12/26 16:18

utm.

総合スコア378

utm.

2024/12/26 16:28

何を記載すれば質問者が納得するのか、質問文に記載されておらずどういう回答が求められているのか若干不明ですが、原因といたしましては、widthが100%なので、左側の部分が見えない領域に"埋まっている"状態だから、表示されないのだと思われます。

meex

2024/12/27 01:43

実現することができました。見えない領域に埋まってしまっていたという着眼点はなかったので大変勉強になりました。的確なご指摘ありがとうございます。＞＞何を記載すれば質問者が納得するのか、質問文に記載されておらずの件は”実現したいこと”欄に「画像３のように左側からドロワーメニューを出しつつ、メニューリストは左揃えで配置したい」と書かせて頂いたのが納得するものではございましたが、わかりにくい表現だったようで申し訳ございませんでした。

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