[html,css(sass,scss)]ヘッダーの背景色を幅いっぱいにできない

サイトのヘッダー（ナビゲーション）の背景色を幅いっぱいにしたいのですが、うまくいきません。
最初navタグをulにしていましたがそれでは左が塗りつぶされず、navにすると今度は右が塗りつぶされませんでした。
あと、この設定ではテキストにカーソルを合わせても背景色が変わりません。そこも直したいです。なお、背景色を設定しなかった場合うまくいきました。

html
1<html>
2...
3<header>
4	<div><nav>
5		<li><a href="#">マイレビュー</a></li>
6		<li><a href="#">漫画・アニメ</a></li>
7		<li><a href="#">映画</a></li>
8		<li><a href="#">小説・その他書籍</a></li>
9		<li><a href="#">ゲーム</a></li>
10		<li><a href="#">一般製品</a></li>
11	</nav></div>
12</header>
13...
14</html>

scss
1body{
2   ...
3   margin:0;
4}
5header{
6	
7	width: 100%;
8	&>div{
9		nav{
10			margin: 0;
11			mask-type: none;
12			width: 100%;
13			li{
14				
15				margin : 0 auto;
16				display: block;
17				float: left;
18				width: 16%;
19				align-content: center;background-color: cornflowerblue;
20				a{
21					
22					color: white;
23					text-decoration: none;
24				}
25				a:hover{
26					background-color: darken( cornflowerblue, 0.8);
27				}
28			}
29		}
30	}
31}

kszk311

2018/05/28 14:20

左、右とはどこの事を示しているのでしょうか。こう言う場合は、スクショなど頂けると具体的な回答が得られやすくなるかと思います。

kszk311

2018/05/28 14:39 編集

liとa:hoverに、同じbackground-colorを指定しているので、カーソルを合わせても背景色がかわらないのは正常だと思いますが、そこは理解していますでしょうか？ ↑すみません、コードを見直した結果、理解しましたので一旦無視してください。

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

回答1件

ベストアンサー

liは、ulまたはolの子要素にしか入れられないので、ulはつける必要があります。

html
1<header>
2	<div>
3		<nav>
4			<ul>
5				<li><a href="#">マイレビュー</a></li>
6				<li><a href="#">漫画・アニメ</a></li>
7				<li><a href="#">映画</a></li>
8				<li><a href="#">小説・その他書籍</a></li>
9				<li><a href="#">ゲーム</a></li>
10				<li><a href="#">一般製品</a></li>
11			</ul>
12		</nav>
13	</div>
14</header>	
15

で、多分こういうことではないでしょうか。
nav（幅いっぱいにしている所）に背景色を指定して、aホバー時に暗くする。
darkenは、小数点ではなく%指定なので、80%で。
一度これでご確認下さい。

css
1body{
2	margin:0;
3}
4header{
5	width: 100%;
6	&>div{
7		nav{
8			margin: 0;
9			mask-type: none;
10			width: 100%;
11			background-color: cornflowerblue;
12			ul {
13				overflow: hidden;
14				margin: 0;
15			}
16			li{
17				margin : 0 auto;
18				display: block;
19				float: left;
20				width: 16%;
21				align-content: center;
22				a{
23					color: white;
24					text-decoration: none;
25					display: block;
26				}
27				a:hover{
28					background-color: darken( cornflowerblue, 80%);
29				}
30			}
31		}
32	}
33}
34