tanatiyo 2日前くらいの記事で、ヘッダーを上部固定したらレスポンシブが崩れてしまった！と書きました。
解決できたので( ..)φメモとして残しておきます。
現象：レスポンシブ対応している時に、画面右側に謎の余白が空いている。スクロールする度に、ヘッダーの幅も変わり、なぜか画面スクロールバーも出現してくる！
position：fixed周りをいろいろいじくって試行錯誤してみましたが修正できず、かなり時間を費やしてしまいました。
解決した方法としては、viewportの設定です。いつの間にか一部抜けていたのか、始めから抜けていたのか謎です。
viewportの設定とは・・・・盲点でしたorz
次から同じような現象が起これば、先にviewportの設定を疑うことにします。
それにしても、いつの間にか抜けていたのかどうか分からない・・・というのは大きな問題ですね。
今Gitについて調べているので、ソースコード管理のために、この際Gitを導入していっても良さそうです。
まずは、しょーごさんのコーディング課題【中級編】を仕上げてからにします。。。
※追記
翌日見たら、また右側に余白が出来ていましたΣ(ﾟ∀ﾟﾉ)ﾉｷｬｰ
と、いうことで、上の参考サイトの記事にもある通り、
//省略
<heade>
//省略
</head>
<body>
<div class="wrapper">
//省略
</div><!--/.wrapper -->
</body>と、太字のようにwrapperを追加して、
.wrapper{
overflow: hidden;
}とすると、右側の余白が消えました！
とりあえず解決できて良かったです。
でも、あの右側の余白の正体は一体・・・・
もしかしたら、各コンテンツやブロックの「幅」に問題がある可能性も・・・
後でもう一回詳しく調査してみたいと思います。
※4月22日更に追記。
↑overflow：hidden;では根本的な問題の解決に至らなかった為、修正します。
根本的な問題を探し出して修正を試みることにしました。
↑のoverflow：hidden;の記事を読んで、参考にしてしまった方ごめんなさい。あまり好手ではないです。
記事をこのまま残すのは自分への反省も込めてです。overflow：hidden;の記事は、「こういったことして更にレスポンシブがおかしくなっちゃった人もいるんだ」というくらいの気持ちで読んでくださいorz
body全体をwrapperで囲んで、overflow：hidden;だと、更におかしい挙動を生んでしまいました・・・
初心者の場合、このoverflow：hidden;はあまり使わない方が良い、と過去に聞いたこともありました。
ここで使ってしまうなんて・・・反省です。
考えてみれば、実案件対応の時に、お客様に納品するものが、このようなクオリティだと先方にも失礼ですよね。
完成を急ぐあまり、そこらへんの意識が抜けてしまっていました。
せっかくjQueryでいろいろな動作をつけて、こだわって作っているんだから、最後までしっかりとしたものを作り上げようと思います！！
反省終わり！
また解決したら記事を書こうと思います。