background-colorが反映されない

初心者でサイト模写をしているのですがheaderのbackground-colorが反映されません。
HTMLは

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="js/script.js"></script> <header> <div class="container"> <div class="header-left"> <img src="img/header-logo.png"> </div> <div class="header-right"> <ul> <li>会社情報</li> <li>ニュースリリース</li> <li>事業・製品</li> <li>サービス</li> <li>採用情報</li> </ul> </div> </div> </header> </body> </html>

CSSは

header{
background-color:#2a7eb1;
}
.container{
width:1180px;
margin:0 auto;
}
.header-left img{
float:left;
padding:16px 0;
}

.header-right li{
list-style:none;
padding:27px 30px 20px 0;
float:right;
}
でコードを色々と変えたのですがbackground-colorが反映されません。どの記述が間違っているのかを知りたいです。

m.ts10806

2019/07/26 00:02

コードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown

m.ts10806

2019/07/26 00:09

header背景色の指定以外は効いているのでしょうか？問題切り分けがどこまでできているのか（分かっていること分かっていない事）を具体的に記述してください。 https://teratail.com/help/question-tips#questionTips2-1

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

回答3件

最近はfloatは敬遠されてflexに移ってきてますよね
ちなみにcontainerの幅広すぎるので溢れたときのことも
考えておいたほうが良いでしょう

初心者ということなので細かいですが、imgには必ずheight/widht/altを明記してください

CSS
1<style>
2header{
3background-color:#2a7eb1;
4overflow:hidden;
5}
6.container{
7width:1180px;
8margin:0 auto;
9display:flex;
10justify-content:space-between;
11}
12.header-left img{
13padding:16px 0;
14background-color:lime;
15left:0px;
16}
17
18.header-right{
19right:0px;
20padding:0px;
21margin:0px;
22}
23.header-right ul{
24margin:0px;
25list-style:none;
26display:flex;
27}
28.header-right li{
29margin:0px;
30padding:27px 30px 20px 0;
31background-color:aqua;
32}
33</style>
34
35<header>
36  <div class="container">
37    <div class="header-left">
38      <img src="img/header-logo.png" width="100" height="100" alt="img">
39    </div>
40    <div class="header-right">
41      <ul>
42        <li>会社情報</li>
43        <li>ニュースリリース</li>
44        <li>事業・製品</li>
45        <li>サービス</li>
46        <li>採用情報</li>
47        </ul>
48    </div>
49  </div>
50</header>

投稿2019/07/26 01:41

編集2019/07/26 01:42

yambejp

総合スコア114769

ベストアンサー

float しているものしかないので高さがありません。
clearfix で検索してみてください。

CSS
1header::after {
2  content: '';
3  display: block;
4  clear: both;
5}

投稿2019/07/26 00:27

x_x

総合スコア13749

m.ts10806

2019/07/26 00:31

疑似要素って便利なんですね（そこでclearを使う発想が今までなかったことを反省・・）

kyohaya

2019/07/26 01:49

heightを忘れていました、解決できました。ありがとうございます。

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

デベロッパーツールを確認すると分かりますが、floatが効いていてheaderも.containerも高さがなくなってます。

headerに適当な高さを持たせる
or
clear:both;を持った要素をheaderの最後に入れる

どちらかで対応してください。
（floatを使うならclearが良いと思いますが）

投稿2019/07/26 00:19

編集2019/07/26 00:28

m.ts10806

総合スコア80850

kei344

2019/07/26 02:18

別の回答へのコメントへの返信ですがこちらの回答にぶら下げます。 float対策は長い歴史があって、IE6の時代（なのでNetscape6とかMac IEとかも対象）にその手法が発見されました。Bootstrap やCSSフレームワーク系には必ずといって含まれていたので、無意識に使用していたと思います。【「clearfix」についてちょっと考えてみた。｜ Tips Note by TAM】 https://www.tam-tam.co.jp/tipsnote/html_css/post192.html 【（2019年更新）【CSS】最新のclearfixがどんどん短く。Bootstrap 2/3/4のCSSを見て】 https://jdash.info/archives/clearfix_at_Bootstrap_CSS