レスポンシブの時に出る右側の余白が消えません。

### 前提・実現したいこと

Bootstrap学習中、レスポンシブの時に出る右側の余白を消すことができず調べてもどれも該当しない（もしくはさせ方が分からない）ので助けていただきたいです

発生している問題・エラーメッセージ

サイト全体の右側に余白がでている

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3 <head>
4   <!-- Required meta tags -->
5   <meta charset="utf-8">
6   <meta name="viewport" content="width=device-width, initial-scale=1">
7
8   <!-- Bootstrap CSS -->
9   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
10
11   <title>Hello, world!</title>
12 </head>
13
14 <body class="bg-light">
15   <header>
16         <nav class="navbar navbar-expand-lg navbar-light bg-dark">
17           <div class="container-fluid">
18             <a class="navbar-brand text-white" href="#">Bootstrap</a>
19             <button class="navbar-toggler bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
20               <span class="navbar-toggler-icon"></span>
21             </button>
22             <div class="collapse navbar-collapse" id="navbarNav">
23               <ul class="navbar-nav">
24                 <li class="nav-item">
25                   <a class="nav-link active text-white" aria-current="page" href="#column">column</a>
26                 </li>
27                 <li class="nav-item">
28                   <a class="nav-link text-white" href="#Flex">Flex</a>
29                 </li>
30                 <li class="nav-item">
31                   <a class="nav-link text-white"　href="#tab">tab</a>
32                 </li>
33                 <li class="nav-item">
34                   <a class="nav-link text-white"　href="#Ratios">Ratios</a>
35                 </li>
36                 <li class="nav-item">
37                   <a class="nav-link text-white"　href="#modal">modal</a>
38                 </li>
39                 <li class="nav-item">
40                   <a class="nav-link text-white"　href="#">card</a>
41                 </li>
42                 <li class="nav-item">
43                   <a class="nav-link text-white"　href="#">accordion</a>
44                 </li>
45                 <li class="nav-item">
46                   <a class="nav-link text-white"　href="#">contactform</a>
47                 </li>
48               </ul>
49             </div>
50           </div>
51         </nav>
52   </header>
53
54     <!--　スライドショー　-->
55         <div class="keyvisual">
56             <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
57                 <div class="carousel-indicators">
58                   <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
59                   <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
60                   <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
61                 </div>
62                 <div class="carousel-inner">
63                   <div class="carousel-item active">
64                     <img src="images/img1.jpeg" class="d-block w-100" alt="...">
65                     <div class="carousel-caption d-none d-md-block">
66                         <h5>HTML/CSS</h5>
67                       </div>
68                 
69                   </div>
70                   <div class="carousel-item">
71                     <img src="images/img2.jpeg" class="d-block w-100" alt="...">
72                     <div class="carousel-caption d-none d-md-block">
73                         <h5>Bootstrap</h5>
74                       </div>
75                 
76                   </div>
77                   <div class="carousel-item">
78                     <img src="images/img3.jpeg" class="d-block w-100" alt="...">
79                     <div class="carousel-caption d-none d-md-block">
80                         <h5>Programing</h5>
81                       </div>
82                 
83                   </div>
84                 </div>
85                 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
86                   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
87                   <span class="visually-hidden">Previous</span>
88                 </button>
89                 <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
90                   <span class="carousel-control-next-icon" aria-hidden="true"></span>
91                   <span class="visually-hidden">Next</span>
92                 </button>
93               </div>
94         </div>
95
96   <div class="container bg-white py-5 my-5">
97       <!-- Bootstrapの特徴 -->
98       <div id="column">
99           <h2 class="text-center py-3">Bootstrapの特徴</h2>
100       </div>
101       <div class="row text-center">
102           <div class="col-md-4 col-12">
103               <img class="img-fluid" src="images/Rectangle2.jpg" alt="">
104           </div>
105           <div class="col-md-4 col-12">
106               <img class="img-fluid" src="images/Rectangle3.jpg" alt="">
107           </div>
108           <div class="col-md-4 col-12">
109               <img class="img-fluid" src="images/Rectangle4.jpg" alt="">
110           </div>
111       </div>
112
113       <!-- お客様の声 -->
114       <div id="Flex">
115           <h2 class="text-center py-3">お客様の声</h2>
116       </div>
117       <div class="d-flex flex-wrap-reverse justyfy-content-center">
118           <div class="col-md-6 col-12 p-0 align-self-center h3 p-4">
119               ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
120           </div>
121           <div class="col-md-6 col-12 p-0 align-self-center">
122               <img class="img-fluid" src="images/Rectangle5.jpg" alt="">
123           </div>
124       </div>
125       <div class="d-flex flex-wrap justyfy-content-center">
126           <div class="col-md-6 col-12 p-0 align-self-center">
127               <img class="img-fluid" src="images/Rectangle6.jpg" alt="">
128           </div>
129           <div class="col-md-6 col-12 p-0 align-self-center h3 p-4">
130               ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
131           </div>
132       </div>
133
134       <!-- Bootstrapのタブ -->
135       <div class="pt-5" id="tab">
136           <h2 class="text-center py-3">Bootstrapのタブ</h2>
137       </div>
138       <div class="tab">
139           <ul class="nav nav-tabs flex-nowrap" id="myTab" role="tablist">
140               <li class="nav-item col-4 p-0 ">
141                   <a class="nav-link text-center" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">グリッドシステム</a>
142                 </li>
143               <li class="nav-item col-4 p-0 ">
144                 <a class="nav-link text-center" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">OOCSS</a>
145               </li>
146               <li class="nav-item col-4 p-0">
147                 <a class="nav-link text-center" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">豊富なコンポーネント</a>
148               </li>
149       　　 </ul>
150             <div class="tab-content" id="myTabContent">
151               <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
152                   <div class="col-md-8 col-12 my-5 mx-auto">
153                   Bootstrapでは横幅を１２個の列に分けたグリッドシステムを採用したデザインになっています。 １２は２,3,4,6で割り切れるのでレスポンシブデザインが用意になっています
154                   </div>
155               </div>
156               <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
157                   <div class="col-md-8 col-12 my-5 mx-auto">
158                   BootStrapではOOCSS（Object-Oriented CSS）というオブジェクト指向CSSが採用されています。 構造と見た目を切り離した設計になります。
159                   </div>
160               </div>
161               <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
162                   <div class="col-md-8 col-12 my-5 mx-auto">
163                   このサイトでも使われているようにBootstrapでは様々なコンポーネントが用意されています。 公式サイトで調べながら使いながら慣れていきましょう
164                   </div>
165               </div>
166             </div>
167       </div>
168
169 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
170
171   <!-- Option 2: Separate Popper and Bootstrap JS -->
172   <!--
173   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
174   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
175   -->
176 </body>
177</html>


### 試したこと

body内をwrapperタグで囲いoverflow：hiddenをcssで追加、調べて出てきたことは大体を試しました

### 補足情報（FW/ツールのバージョンなど）

コードの見た目は初心者なので汚いですがご了承ください。長過ぎるため分からないなりに気になったところ以外はコードを省略しています。　必要な部分があれば用意します。
header内のhrefが#flexまでしかエディタでアンダーバーが出ていませんでした。（#flexまではクリックすると指定の場所まで飛びます）
こちらが原因なのかも教えていただければ幸いです。　　よろしくお願いします。

m.ts10806

2021/09/28 12:08

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564 ＞必要な部分があれば用意します。可能なら他者がコピペで再現可能な程度には欲しいかもしれません。再現できれば良いのでコンテンツ全部なくても良いです。ただ、案外bodyより前に問題があることもゼロではないので、DOCTYPEから欲しいところです。

kouhei_727

2021/09/28 12:17

ご指摘ありがとございます。文字数の関係ですべては記載できずこの場合はどうすればいいのでしょうか、、お手数おかけしますがよろしくお願いします。

m.ts10806

2021/09/28 12:42

再現できれば良いのでコンテンツ全部なくても良いです。再現可能な最小構成のコードですね。

kouhei_727

2021/09/28 12:48

修正しましたのでご確認の方よろしくお願いします。

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

回答1件

ベストアンサー

こんにちは（＊＾＾＊）　

試したところ、<a>の中に全角のスペースをつくっているので、#flex以降が動いてくれていないと思います。

　の、hrefの前が全角スペースになっています。（#tab以降すべて）半角のスペースになおすと、動くと思います。（私の環境では治したらうごきました！）

※文字列以外でコード内に全角スペースを作ってしまうと基本的に動いてくれないことが多いので、半角でスペースをつくると動いてくれると思います！

投稿2021/09/28 12:48

mmmmmm-.

総合スコア32

kouhei_727

2021/09/28 12:57

回答ありがとうございます！無事に戻り自分の未熟さを痛感するばかりです。。 aタグの中身が影響して余白ができている可能性があると見たのでもしかしたらと思っていましたが違いました。ですが、すごく助かりました。ありがとうございます！

mmmmmm-.

2021/09/28 13:42 編集

お役に立てていたら嬉しいです（＊＾＾＊）私もよくやってしまいます（笑）あと、確認すると、二つなおすべきところが見つかりました。１、この部分の下の</ul>の前に全角スペースがありました。半角スペースにしたほうがいいと思います。 <ul class="nav nav-tabs flex-nowrap" id="myTab" role="tablist"> <li class="nav-item col-4 p-0 "> <a class="nav-link text-center" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="false">グリッドシステム</a> </li> <li class="nav-item col-4 p-0 "> <a class="nav-link text-center" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">OOCSS</a> </li> <li class="nav-item col-4 p-0"> <a class="nav-link text-center" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">豊富なコンポーネント</a> </li> 　　 </ul>  2. <div class="container bg-white py-5 my-5"> に対する</div>が最後に書き忘れてしまっているため、書き直してみるといいと思いました（＾＾） ’余白ができている’という部分が分からなかったです汗　どこの部分のことか教えていただけたら幸いです。追記：もう一つ、治したほうが良いところがありました。お客様の声　のパートの、 <div class="d-flex flex-wrap-reverse justyfy-content-center"> ここの justyfy-content-center を justify-content-centerに書きかえるといいと思いました(^^) 余白ができているというのは、headerの中のcontactformの右側のことでしょうか、、、、、もしそうでしたら、このコードの書き方ですとこのように右側に余白があるレスポンシブになると思います。

kouhei_727

2021/09/29 10:52 編集

次々と有益な助言本当にありがとうございます、、！質問に質問で申し訳ありませんがそうした改善すべきポイントはどうやって見つけているのでしょうか？余白部分の画像も追加しました！お時間のある時で構いませんので回答の方よろしくお願い致します。

mmmmmm-.

2021/10/01 16:00

エディタにVSコードを使っているのですが、そこに貼り付けたら全角スペースのところだけ白くなってるのでわかりました（＾＾）また、スペルが間違っていると赤いアンダーバーがでてくるのでわかりました。そういう機能がついているエディタが多いのではないかと思います、、、チェックしてみるとサインがあると思います＾＾お写真追加ありがとうございます＾＾　イメージつきました！私の環境だと、↑のように右に空白ができていませんでした。考えられる解決方法２つあります１つ目　reset.cssをよみこむ。　コードは同じでもブラウザごとにデフォルトのｃｓｓがあり、ブラウザごとにpaddingやmarginなどが変わるので読み込むといいと思います！　https://web-camp.io/magazine/archives/30817　←読むとわかりやすいと思います＾＾ 2つ目　空白をなくしたい親要素　に　class="w-100"を設定してみる。例えば <header class="w-100">　これはbootstrapで、指定した要素の横幅が１００％になるよう設定しています。私の環境で試せていないので、できるかわからないですがもしうまくいったら幸いです＾＾

kouhei_727

2021/10/04 11:01

記事の方、拝見させていただきました！僕の理解では ① reset.cssは複数の種類があり、各reset.cssによって表示のされ方が違う ② それらを比べたときにNormalize.cssが適しているこのようになっていますその上で↓ サイトにてダウンロード後cssファイルに貼り付け保存し、head内に<link>を（元からあるcssの<link>タグの上に）追加して href="css/normalize.cssを指定余白がサイト全体に出ているのでbodyタグに対してw-100を指定上記の2点を試したのですが変わらずでした...。ディベロッパーツールで余白を確認できないバグでわからないままの場合最終は妥協という形になるのでしょうか...? 面倒は承知の上ですが、お力添えの方よろしくお願いします。

mmmmmm-.

2021/10/06 06:54

こんにちは＾＾そうですか、、、、、、サイトにてダウンロード後cssファイルに貼り付け保存し、head内に<link>を（元からあるcssの<link>タグの上に）追加して href="css/normalize.cssを指定 ※これは、cssというディレクトリの下にnormalize.cssを作成して、貼り付け保存したという理解で大丈夫でしょうか。もしそうであれば、↑の指定の仕方で大丈夫であると思います＾＾もし、既存のcssに貼り付けしたなら、<link rel="stylesheet" href="normalize.css">の指定はなしで大丈夫だと思いました＾＾考えられる解決策は、１normalize.cssのパスがあってるか確認　相対パスについてわかりやすい記事→https://310nae.com/filepath/ ２normalize.cssのCDNを使ってみる 3 違うreset.cssを使ってみる。cdnを読み込むパターンだと簡単にできると思うので、いろいろ試してみるのも一つの手であると思います。４今かいているファイルとは別にもう一度ファイルを新しくし作って、html.cssをコピペして走らせてみる。考えられるのはこんな感じです、、、、何か原因があるはずなので、ちょっとした何かが余白を作っていると思います。これを直すのに地味な作業になると思いますが、成功できるよう祈っています！もし↑の解決策が、お力になれたら嬉しいです＾＾

kouhei_727

2021/10/08 09:26

お返事遅れてしまい申し訳ございません。結局原因はわからないままなのですが、サイトを作り進めている内にいつの間にか消えていました！お手数とお時間かけて回答の方をいただいてシンプルに感動しました。自分はまだ駆け出しなので周りを助けることはできませんが、いつかmmmmmm-.さんのように助けれるように頑張っていきます！また助けていただくことが出てくるかもしれませんがその際はお力添えいただければ幸いです。本当にありがとうございました。失礼します。

mmmmmm-.

2021/10/09 05:59

なおってよかったです（＊＾＾＊）！わたしも原因はわからないけど急に解決できること結構あります。学習を進めていくうちにあの時ここが原因だったかとわかっていくことも多いのでいつかわかる日が来ると思います＾＾嬉しいお言葉ありがとうございます＾＾いつでもわからないことは気楽に聞いていただければお手伝いさせていただきます＾＾

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