【ドットインストール】CSSでコードが反映されない

Question

前提・実現したいこと

CSSで背景に色をつけたい

発生している問題・エラーメッセージ

コードを入力しているのに色が反映されない

入力しているソースコード

body {
color: #333;
font-family: verdana,sans-serif
}

header{
background-color: #efefef;
}

補足情報（FW/ツールのバージョンなど）

ドットインストール　　はじめてのCSS
» #05 CSSのボックスモデルを確認しよう　を行っています。

文字の色は反映できましたが、背景の色が反映されません。

Answer 1

かなり、勘に頼って回答してみます。

header内の要素について、float: left;を使用して、ロゴやナビゲーションを左右に配置しているのではないかと推測します。そのとき、float: left;を指定している場合、clear: both;を忘れていると親要素の高さが潰れて背景画像が表示されない、ということが生じる場合があります。

以下を指定すると、解決するかもしれません。

header::after {
   content: "";
   display: block;
   clear: both;
}

---

「.clearfix」という、広く知られたテクニックがあるので聞いたことがなければ調べてみてください。

参考URL:
CSSのclearfixを完全網羅【初心者でも分かる入門図解付き】
https://web-camp.io/magazine/archives/27842

Answer 2

ドットインストールには、ソースコードを比較する機能があります。
それを使って、自分で調べてください。

Comments

[Y-yky]

ありがとうございます。コードに違いはないみたいです。。

[technocore]

htmlファイルは比較したのですか？

Answer 3

fontfamilyの;が抜けていますよ〜

Comments

[Y-yky]

追加しましたが反映されません。。

body {
color: #333;
font-family: verdana,sans-serif;
}

header{
background-color: #efefef;
}

Answer 4

１からやり直したらできました。ファイル指定が間違っていたんだと思います。
ありがとうございました。

Answer 5

はじめてのHTMLからやり直してみます。
皆様ありがとうございました。