課題のファイルをWordPressのphpファイルに変更した後、ChromeのPerfect Pixcelでチェックしてみるとレスポンシブ時にかなり、縦にずれています。原因は管理画面のツールバーのようです。ここでともすたさんの動画を思い出しました。通常は下記の用にツールバーは上にあります。動画の内容はツールバーが上にあると何かと邪魔になる場合があるので、下にすることができるというものでした。
この時は別に上でもいいかなと思っていたのですが、邪魔になるとはこのことかと思い、動画をもう一度、見直してAdmin Bar positionのプラグインを入れました。有効にするだけで下記のようにツールバーが下になり、デザインの確認がしやすくなりました。ともすたさんありがとうございます。
