webサイト制作で右側に余白ができてしまう

######簡単なウェブサイトを制作しているのですがPC表示のとき右側に余白ができてしまいます。検証ツールで確認したところモバイル用の要素が存在していることになっていてそれが邪魔をしてるのではと思い、該当要素にdisplay:none;をかけましたが要素は消えましたが余白は残ったままでした。検証ツールでは他に邪魔をしていそうな要素はないのですが、どこが問題なのでしょうか？全部は文字制限で送れないのでモバイルメニューのとこのソースコードを貼りました。

html
1      <div class="header-top">
2        <h1>ALPHSMILE<span> INC.</span></h1>
3        <div class="btn">
4          <button class="btn__header">
5            <span></span>
6            <span></span>
7            <span></span>
8          </button>
9          <div class="btn__text">MENU</div>
10        </div>
11        <div class="right-box">
12          <div class="right-box__text">
13            <p>デザインで人を笑顔にする会社<br>ALPHSMILE INC.</p>
14            <h1>DESIGN
15              <br>FOR</br>SMILE
16            </h1>
17          </div>
18        </div>
19        <div class="left-box">
20        </div>
21      </div>
22       <div class="mobile-menu">
23          <ul class="mobile-menu__list">
24            <li class="mobile-menu__item"><a class="mobile-menu__link" href="">ABOUT US</a></li>
25            <li class="mobile-menu__item"><a class="mobile-menu__link" href="">WORKS</a></li>
26            <li class="mobile-menu__item"><a class="mobile-menu__link" href="">CULTURE</a></li>
27            <li class="mobile-menu__item"><a class="mobile-menu__link" href="">TOPICS</a></li>
28            <li class="mobile-menu__item"><a class="mobile-menu__link" href="">CONTACT</a></li>
29          </ul>
30       </div>    
31    </section>
32    <section id="middle">
33      <div class="pc-menu">
34        <ul class="pc-menu__list">
35          <li class="pc-menu__item"><a class="pc-menu__link" href="">ABOUT US</a></li>
36          <li class="pc-menu__item"><a class="pc-menu__link" href="">WORKS</a></li>
37          <li class="pc-menu__item"><a class="pc-menu__link" href="">CULTURE</a></li>
38          <li class="pc-menu__item"><a class="pc-menu__link" href="">TOPICS</a></li>
39          <li class="pc-menu__item"><a class="pc-menu__link" href="">CONTACT</a></li>
40        </ul>
41     </div>
42      <div class="container about">
43        <div class="about__text">
44          <h1>ABOUT US</h1>
45          <p>ALPHSMILEは、デザインで人を笑顔にする会社。<br>
46            なんでもない日常に少しのワクワクと遊び心を提供します。笑顔には世界を変える力がある、デザインには人を幸せにする力がある。毎日に幸せを感じて生きていきたい。</br>
47            ALPHSMILEの社名にはそんな想いが込められています。</p>
48            <div class="about__btn">READ MORE</div>
49          </div>
50        </div>
51        </section>
52

scss
1@import "breakpoints/base";
2
3@media (min-width: 576px){
4  @import "breakpoints/576up";
5}
6@media (min-width: 992px){
7  @import "breakpoints/992up";
8}
9
10

http://127.0.0.1:5504/index.html

Lhankor_Mhy

2021/05/15 00:30

ご提示いただいていない部分に原因があると思われます。

hatena19

2021/05/15 00:31 編集

提示のモバイルメニューには position: fixed; を設定しているので、他の要素のレイアウトには影響を与えないので、別の部分に原因があると思われます。display:none; を指定しても変わらないことからも他に原因があると推測できます。細かい内容は省略してもいいので、全体のHTML構造が分かるようなコードを提示できませんか。あるいは、公開できるなら製作中のサイトのURLを提示するとか。

Lhankor_Mhy

2021/05/15 00:33

もしかしてと思いますが、PC用を読み込んだ後に、モバイル用を読み込んでいたりしていませんか？