headerのbackground-colorが変更できません。どうしてでしょうか？

前提・実現したいこと

HTML
1<!DOCTYPE html>
2<head>
3  <meta charset="utf-8">
4  <title>hhhhhhhhhh</title>
5  <link rel="stylesheet" href="css/stylesheet.css">
6
7</head>
8<body>
9<div class="header">
10    <div class="header-logo">
11     sssssssss
12    </div>
13    <div class="header-list">
14      <ul>
15        <li class="list1">3333333333</li>
16        <li class="list1">2222222222</li>
17      </ul>
18    </div>
19</div>
20<div class="main">
21    <p>
22      hhhhhhhhhhhhhh
23    </p>
24    <p>
25      gggggggggggggg
26    </p>
27      <h2>
28      eeeeeeeeee
29      </h2>
30        <p> ffffffffffffffffff</p>
31      <ul>
32        <li>ddddddddddddddd</li>
33          <p>cccccccccccccccccccc</p>
34        <li>bbbbbbbbbbbbbbbbbbbbb</li>
35          <p>aaaaaaaaaaaaaaaaaaaa</p>
36      </ul>
37
38</div>
39<div class="footer">
40    <div class="footer-logo">
41      ttttttttttt
42    </div>
43    <div class="footer-list">
44
45    </div>
46</div>
47</body>

CSS
1.header {
2  background-color:skyblue;
3}
4.header-logo {
5  float: left;
6  font-size: 20px;
7  padding:5px;
8}
9.main {
10  color:gray;
11}
12.list1 {
13  list-style: none;
14  float: left;
15  padding: 5px
16}

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

headerのbackground-colorが変わらない
webで表示する際、header divisionとmain divisionが繋がって表示されてしまう

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

回答2件

ベストアンサー

divのクラス「header」とheaderタグは別物ですよ

css
1/*ドットがたりない*/
2.header {
3  background-color:skyblue;
4}

追記

中身がfloatしてるので親ボックスは高さが維持できなくなります。

css
1.header {
2  background-color:skyblue;
3  overflow: hidden;
4}

投稿2020/06/10 07:29

編集2020/06/10 08:42

sousuke

総合スコア3828

zhjhai

2020/06/10 07:44

質問のコードにはドット(.)をつけ忘れてしまいました。元のコードには付いています。申し訳ございません

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

css
1.header {
2	background-color: skyblue;
3	display: flow-root; /* 追加 */
4}

参考：
ブロック整形コンテキスト - 開発者ガイド | MDN

投稿2020/06/10 08:04

Lhankor_Mhy

総合スコア36158

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

headerのbackground-colorが変更できません。どうしてでしょうか？

前提・実現したいこと

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

追記

関連した質問