tanatiyo 前の記事に追加でいろいろと注意書きをさせて頂きました。
反省して、ここからもう一度、ヘッダー上部固定でレスポンシブが崩れた件、について根本的な問題を解決するべく動いていこうと思います。
私自身は、レスポンシブ対応に取り掛かる前にヘッダーの上部固定あたりをいじっていたのもあって、「ヘッダー部分が絶対怪しい」とにらんでいたのですが、そうじゃない可能性もあります。
ここではまず、そういった意識も考えも全て捨てて、「一から原因を探す」ことに注力したいと思います。
差し当たってやることは、まず
display:none;を使って、ヘッダー、メイン、フッターの順に表示を消していって、レスポンシブが崩れているのが解決されているのかどうかをみていこうと考えています。
そうして大きなブロックで対象が絞れたら、これを各セクションやコンテンツの中に焦点を当てて、少しずつ対象を絞っていくことにします。
そうすると、ヘッダーではなく、メインの中の一つのコンテンツを消すと、右側の余白がきれいになくなりました！！
どうやら、そのコンテンツかその中身に原因がありそうです・・・・次回へ続く。
ちなみに、これを試す前に既にディベロッパーツールでは何度も原因を探っていました。
そこでは右側の余白部分まで領域がはみ出しているのは、実は「ヘッダー部分のみ」だったのです。
他のコンテンツたちは綺麗に幅に収まっていたので、最初私が「ヘッダー部分に原因がある」と当たりをつけて動いていたのは
これも関係しています。
ただ、不思議な事に、この「ヘッダー」をdisplay:none;で表示を消しても、右側の余白は改善されなかったんですね＾＾；
デバッグの時に大活躍してくれていたデベロッパーツールに完全に頼り切っていましたので、これは衝撃でした。。。
もし、この方法でうまくいくことが出来たら、次回からはデバッグの原因を突き止めるのに、こういった方法もあると、
手段が増えます。
これからweb制作を行っていくのに良い経験だと思うので、原因を突き止めて修正までいきたいです！