css スマホサイズにした時に余白ができてしまいます。

Question

html、cssでコーディングを行い、レスポンシブ対応もしているのですが、スマホサイズにしたときに右側に余白ができ、左右のスクロールバーができてしまいます。
色々試しましたが原因が分からないので教えていただけないでしょうか？

    <div id="wrapper">
    <header>
        <div class="header_inner main_bg_img">
            <div id="header_fixed">
                <h1><a href="#wrapper">Cresta Design</a></h1>
                <nav id="nav_menu">
                    <ul>
                        <li><a href="#concept">Concept</a></li>
                        <li><a href="#service">Service</a></li>
                        <li><a href="#works">Works</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
                <!-- ハンバーガーメニュー中身 -->
                <nav id="hamburger_menu">
                    <ul>
                    <li><a href="#concept">Concept</a></li>
                    <li><a href="#service">Service</a></li>
                    <li><a href="#works">Works</a></li>
                    <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
                <!-- ハンバーガーメニューのアイコン -->
                <div id="hamburger">
                    <span class="inner_line" id="line_top"></span>
                    <span class="inner_line" id="line_middle"></span>
                    <span class="inner_line" id="line_bottom"></span>
                </div>
            </div>
            <div class="top_message">
                <p class="main_message">Design for Smile.</p>
                <p class="sub_message"><span></span></p>
            </div>
        </div>
        
    </header>
    <section>
        <article id="concept">
            <div class="left_title">
                <h2>CONCEPT</h2>
            </div>
            <P class="concept_message">
                
            </P>
            <div class="concept_contents">
                <p class="concept_explanation">
                   
                </p>
                <img class="concept_img" src="img/[e-mail]" alt="">
            </div>
            <div class="light_color sentence_right">Our Concept</div>
        </article>
        <article id="works">
            <div class="right_title">
                <h2>Works</h2>
            </div>
            <div class="works_inner">
                <dl>
                    <dt><img src="img/[e-mail]" alt="新規サイトイメージ写真"></dt>
                    <dd></dd>
                </dl>
                <dl>
                    <dt><img src="img/[e-mail]" alt="新規サイトイメージ写真"></dt>
                    <dd></dd>
                </dl>
                <dl>
                    <dt><img src="img/[e-mail]" alt="新規サイトイメージ写真"></dt>
                    <dd></dd>
                </dl>
            </div>
            <button><a href="#">View more</a></button>
            <div class="light_color sentence_left">Our Works</div>
        </article>
        <article id="service">
            <div class="left_title">
                <h2>Service</h2>
            </div>
            <ul>
                <li><a href="#">Hearing</a></li>
                <li><a href="#">Planning</a></li>
                <li><a href="#">Direction</a></li>
            </ul>
            <div class="light_color sentence_right">Our service</div>
        </article>
        <article id="contact">
            <div class="right_title">
                <h2>Contact</h2>
            </div>
            <p></p>
            <button><a href="#">Contact</a></button>
            <div class="light_color sentence_left">Contact us</div>
        </article>
    </section>
    <footer>    
 
    </footer>
    </div>

    #wrapper {
  width: 100%;
}

/*ヘッダー*/
header {
  width: 100%;
  height: 750px;
  position: relative;
}

header nav {
  float: right;
}

header nav li {
  display: inline-block;
  padding: 5px 10px;
}

header nav li a {
  font-size: 81%;
  display: block;
  border-bottom: 1px solid #333;
}


header .main_name {
  font-size: 225%;
  position: absolute;
  top: 50%;
  transform: translate(-50%);
  z-index: 20;
  left: 50%;
}

header .sub_name {
  font-size: 10vw;
  position: absolute;
  top: 50%;
 transform: translateY(-50%);
  z-index: 10;
  left: 50%;
}

/*article共通*/
article {
  padding: 50px 30px;
  width: 100%;
  box-sizing: border-box;
}

article h2 {
  font-size: 187%;
  margin-bottom: 20px;
  font-weight: bold;
}

article h2 span {
  font-size: 80%;
  display: block;
}

/*プロフィール*/
#profile {
  margin-bottom: 50px;
}

#profile .profile_inner {
  display: flex;
 align-items: center;
}

#profile .profile_inner .profile_image {
  width: 50vw;
}

#profile .profile_inner span {
  display: block;
  padding-left: 20px;
  margin-bottom: 10px;
}

#profile .profile_inner .profile_sentence {
  width: 50vw;
}

#profile .profile_inner .profile_sentence p {
  padding-left: 20px;
  text-align: justify;
  line-height: 1.8em;
}

/*制作物*/
#works {
  width: 100%;
  margin-bottom: 50px;
  /*キャンプ場hp*/
  /*cresta design hp*/
}

#works h3 {
  font-size: 112%;
  margin-bottom: 20px;
}




#works dl dd {
  padding: 10px 1em;
  text-indent: 1em;
}

#works button {
  background-color: #7fd1b9;
  border: none;
  border-radius: 10px;
  float: right;
  padding: 0;
}

#works button a {
  padding: 5px 20px;
  display: block;
}



#works .camp_hp, #works .cresta_hp {
  display: flex;
  margin-bottom: 50px;
}

#works .camp_hp ul li:nth-of-type(1) img, #works .cresta_hp ul li:nth-of-type(1) img {
  width: 25vw;
}

#works .camp_hp ul li:nth-of-type(2), #works .cresta_hp ul li:nth-of-type(2) {
  margin: 10% 0 0 10vw;
}

#works .camp_hp ul li:nth-of-type(2) img, #works .cresta_hp ul li:nth-of-type(2) img {
  width: 5vw;
}

#works .camp_hp .camp_explanation, #works .camp_hp .cresta_explanation, #works .cresta_hp .camp_explanation, #works .cresta_hp .cresta_explanation {
  width: 70vw;
  padding: 5px 0 0 50px;
}

#works .cresta_explanation dd span {
  display: block;
  font-size: 75%;
}



#works .cresta_explanation dd span:nth-of-type(1) {
  margin-top: 2em;
}

/*できること*/
#skills {
  margin: 0 auto　40px;
}

#skills .skills_inner {
  display: flex;
      flex-wrap: wrap;
}

#skills .skills_inner dl {
  width: 400px;
  margin-bottom: 40px;
}

#skills .skills_inner dl dt {
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 20px;
}

#skills .skills_inner dl .fab {
  font-size: 300%;
}

#skills .skills_inner dl .ps_icon, #skills .skills_inner dl .ai_icon {
  width: 40px;
  height: 40px;
  text-align: right;
  line-height: 56px;
  margin-bottom: 13px;
}
responsive css

@media screen and (min-width: 599px) {
  #hamburger_menu {
    display: none;
  }
}
@media screen and (max-width: 599px) {
  /*ヘッダー*/
  .header_inner {
    /*ハンバーガーメニュー*/
  }
  .header_inner #header_fixed {
    width: 100%;
  }
  .header_inner h1 {
    padding-left: 2%;
  }
  .header_inner #nav_menu {
    padding-right: 0;
    display: none;
  }
  .header_inner .top_message {
    width: 100%;
    padding-left: 0;
    padding-top: 154px;
  }
  .header_inner .top_message .main_message {
    font-size: 37px;
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
  }
  .header_inner .top_message .sub_message {
    font-size: 30px;
    line-height: 1.8em;
  }
  .header_inner .top_message span {
    display: block;
    font-weight: bold;
  }
  .header_inner #hamburger_menu {
    position: absolute;
    top: 0;
    right: -110%;
    width: 100%;
    height: 100vh;
    background-color: #282F35;
    transition: .7s;
  }
  .header_inner #hamburger_menu ul {
    margin: 50vh auto 0;
   transform: translateY(-50%);
    text-align: center;
  }
  .header_inner #hamburger_menu ul li a {
    color: #fff;
    display: block;
    padding: 10px;
    translate: .5s;
  }
 
  .header_inner #hamburger {
    display: block;
    position: absolute;
    width: 30px;
    height: 22px;
    top: 30px;
    right: 30px;
    transition: 1s;
  }
  .header_inner #hamburger .inner_line {
    display: block;
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #fff;
    transition: 1s;
   transform-origin: 28px;
  }
  .header_inner #hamburger #line_top {
    top: 0;
  }
  .header_inner #hamburger #line_middle {
    top: 10px;
  }
  .header_inner #hamburger #line_bottom {
    bottom: 0;
  }
  .header_inner .top_move {
            transform: rotate(-45deg);
    top: 50%;
  }
  .header_inner .middle_move {
    opacity: 0;
  }
  .header_inner .bottom_move {
            transform: rotate(45deg);
    bottom: 0;
  }
  .header_inner .in {
            transform: translateX(-110%);
  }
  article .left_title {
    padding-left: 0;
  }
  article h2 {
    font-size: 30px;
  }
  article h2::after {
    width: 90px;
  }

  /*コンセプト*/
  #concept {
    padding: 0 10px;
  }
  #concept .concept_contents {
    flex-direction: column;
    width: 100%;
    margin: 0 auto 55px;
   justify-content: center;
  }
  #concept .concept_contents .concept_explanation {

    width: 100%;
  }
  #concept .concept_message {
    width: 100%;
    margin: 0 auto 34px;
  }
  #concept img {
    width: 100vw;
    height: auto;
  }
  /*ワークス*/
  #works .works_inner {
  flex-direction: column;
  }
  #works dl {
    margin: 0;
  }
  
  /*サービス*/
  #service h2 {
    padding-left: 6%;
    text-align: left;
  }
  #service ul {
   flex-direction: column;
  align-items: center;
  }
  #service ul li {
    width: 100%;
  }
 
  
  
}

Comments

[Lhankor_Mhy]

CSSをご提示ください。
また、Markdownを使ってください。

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

https://teratail-v2.storage.googleapis.com/assets/img/tour/01.webm?1594714893253494

[niconic73027793]

» 【RWD ーレスポンシブー】右にできた謎の余白を消す方法 | バシャログ。 http://bashalog.c-brains.jp/15/06/26-170500.php
これか、
» 【レスポンシブ】横スクロールバーが出現する原因と消す方法 | どぎブロ https://doggy-kbk12.com/scroll-x/

これですかね。

Answer 1

原因が分からないので教えていただけないでしょうか？

ふたつありました。

---

  .header_inner #hamburger_menu {
    position: absolute;
    top: 0;
    right: -110%;
    width: 100%;
    height: 100vh;
    background-color: #282F35;
    transition: .7s;
  }

右に大きくはみ出していますので、スクロールバーが出ます。

---

  #concept img {
    width: 100vw;
    height: auto;
  }

結論から言うと、width: 100vw;はスクロールバーの幅を含むので、スクロールバーが表示された閲覧環境だとその分ページが横にはみ出ます。

100vwで画面からはみ出るのはスクロールバーの幅を含むから【解決方法は？】 | Webサイト制作の相談室

Comments

[maruco2525]

ご回答ありがとうございます。
教えて頂いた２箇所修正しましたが直りませんでした。
まだどこか違っているのでしょうか？

[Lhankor_Mhy]

直したコードを見てみないと具体的なことは言えませんが、一般論的には開発者ツールを活用するのがいいと思います。