background-colorが適用されない

headerのバックグラウンドカラーが適用されません
プロパティの記述ミスはないと思うのですが・・・
どなたか回答お願いします

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="mosha2.css">
   
    <title>Document</title>
</head>
<body>
    <header>
         <div class="container">
              <div class="header-left">
                <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
              </div>
         </div>
    </header>
    
    <section class="main-image-wrapper">
        <div class="main-image-container">
            <div class="face-image"></div>
            <div class="price-image"></div>
        </div>
    </section>
</body>
</html>

.header {
        height: 120px;
        width: 100%;
        background-color:blue;
        
      }
      
.container {
  padding: 30px;
}   
      


.main-image-wrapper {
    clear: both;
    background-image: url(https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/bg-cover-pc.jpg);
    background-size:cover;
    width: 1400px;
    height:500px;
}

.main-image-container {
    padding-left: 20px;
    padding-right: 20px;
    background-image: url(https://www.linguage-school.jp/wp-content/themes/linguage/img/lp/main-text.png);
}

行動規範の内容に同意します

回答1件

ベストアンサー

存在しないセレクタに対してスタイルを当ててるからです。

css
1header {
2  height: 120px;
3  width: 100%;
4  background-color:blue;
5}

要素セレクターと、クラスセレクターの違いを意識してやっていきましょう。

投稿2020/10/22 01:30

miyabi_pudding

総合スコア9528

sige2232

2020/10/22 01:51

ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

background-colorが適用されない

関連した質問