すべての種類の画面用のインタラクティブCSS

Question

私は自分のウェブサイトを完全にインタラクティブにしようとしています。

まず問題：私はそれをしたいとロゴIMGは、垂直に整列されていません。

画面の幅が1200より大きい場合は、上端（nav）からの余白が大きすぎます。それはそのように表示されます：

画面の幅が小さい場合は、私はそれをしたいと、それが表示されます。

私はパディングとマージンを変更しようとしました

が、すべてのための結果なしで画面サイズ。私はこれがいいアイデアかもしれないと思っています：

.homepage #logo { 
     margin-top: -10%; 
    } 

私はそれは良い習慣ではないと思います。

第2号：私は4つのボックスを持っています。私はそれらをインタラクティブにした。私はstackoverflowユーザーのおかげでイメージサイズをインタラクティブにしました。

をそれが小さい場合、画像は本当に大きいです：：だから、画面幅が736px以上であるとき、それはそのように見える参照がここにある

としてリンク：enter link description here どのCSSでもお気軽にお問い合わせください。乾杯

Answer 1

まず、私はabout.Thenは私が2〜4応答グリッド

様々なスポットでHTMLを使用するために作られたthis text documentを保存し、するすべてのCSSをコピー掲示応答画像のCSSを追加して、あなたのCSSのシートを編集してあなたのスタイルシート。

Answer 2

は、あなたが、私はそれらのリンクを使用してコードをクリーンアップし、再度ページを保存し、閲覧したいCSSのエラー css validator errors

の多くを持っているいくつかの html errors

を持っています。あなたのCSSにグリッドシステム設定があるようです。