レスポンシブサイトで、右側に変な余白が出来る

首記の件、教えて頂きたく。

試したこと
・viewportの設定
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
・CSSのwidth等のプロパティをすべて％指定にした。
・CSSを一度すべてコメントアウトした。
・warapperにoverflow: hidden：を追記した
・HTML要素の切り分け(唯一効果あり)

上記すべて行いましたが、右側に余白がでてしまいます。
PCの画面では余白は何の問題もなくありませんが、chromeの検証で確認すると余白が出てしまいます(ほぼすべてのサイズを試しましたが余白ができます)

唯一、効果があったのはHTML要素の切り分けでした。
HTMLを親要素から消していって切り分けていき、特定のタグを消したら余白がなくなりました。
※設定済みのCSSはコメントアウトや削除はしていません

余白ができる原因はすべてCSSに原因があると思っていましたが、
HTMLが原因で余白ができることってありうるのでしょうか。

まだ断定できませんが、そうなるとHTMLの記述の仕方に問題があるという事になりますが、その場合、レスポンシブサイトを作るのはかなり難しいのではないのでしょうか。CSSならまだしも作成したものをやり直さなくてはいけなくなります。

教えて頂きたく何卒お願い致します。

質問者からの補足コメント

• 回答ありがとうございます。
  
  余白が出来るというのはメディアクエリでの話になります。
  URL:
  http://2yui.main.jp/oui/2018/04/22/responsive-pr …
  
  
  CSSに問題があるから余白がでてくると考えていましたが、CSSをすべて消した状態でも余白ができてしまうという状態です。
  教えて頂いた様にCSSリセットした状態でも余白がでてきます。
  
  CSS以外で右側の余白ができる原因が考えられるのか知りたかったので今回ご質問しました。
  もしHTMLだけでもそのような状態が起きることがあれば教えて頂きたくお願い致します。

  No.1の回答に寄せられた補足コメントです。 補足日時：2020/10/27 20:41

No.2 ベストアンサー 回答者： naokita 回答日時： 2020/10/29 09:40

HTML/CSSを検証できない状況なので、何もわかりませんよ・・・

よくやってしまうミスは、
画面幅を超える幅指定コンテンツがあったり、
英数字が改行されずに（breakせず）最大幅を超える場合に、右側が余白のようになりますね・・・

まあ、何のコンテンツが悪さしているのかがわからないのなら、
各コンテンツごとに切り分けて表示してみると、原因がわかるのではないでしょうか。

この回答へのお礼

回答ありがとうございます。

各コンテンツを切り分ける事により原因をつかむことが出来ました。
ありがとうございました。

お礼日時：2020/10/30 15:52

No.1 回答者： fujillin 回答日時： 2020/10/27 17:08

こんにちは

何をどう試しているのかが、さっぱりわからないですし、何をどうしたのかもわかりません。

＞特定のタグを消したら余白がなくなりました。
では、その特定のタグのCSS（あるいはデフォルト設定）に問題があったのではないでしょうか？

ちなみに、各ブラウザは種々の要素にデフォルトのmargin等を設定していますが、それを余白とおっしゃっていたりしますか？？
もしそうであるなら、最初にそれらをリセットしておけば宜しいかと。
https://web-manabu.com/html-css20/