gridタグが効かない

前提・実現したいこと

グリッドレイアウトを
body {
margin: 0;
display: grid;
grid-template-columns: 1fr 900px 1fr;
grid-template-rows: auto auto auto;
}

にしています。

<header>の背景色は画面いっぱいに表示させるために grid-column-start: 1; grid-column-end: -1; で表示させています。

ここまでは問題ないのですが<header>の中の<nav>を
grid-column-start: 2;
grid-column-end: -2;
で書いても<header>と一緒で横幅いっぱいに表示されてしまいます。

どうすれば<nav>タグのgrid-column-startとgrid-column-rowを効かせられるようになりますか？

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

エラーメッセージがない

該当のソースコード

html5
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>a成</title>
6<meta name="viewport" content="width=device-width">
7<link href="https://fonts.googleapis.com/css?family=Paytone+One|Source+Sans+Pro" rel="stylesheet">
8<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
9<link rel="stylesheet" href="as.css">
10</head>
11<body>
12<header>
13<nav>
14 <ul>
15 	<li class="nav1"><a href="">ホーム</a></li>
16 	<li><a href="">ホーム</a></li>
17    <li><a href="">ホーム</a></li>
18    <li><a href="">ホーム</a></li>
19    <li><a href="">ホーム</a></li>
20    <li><a href="">ホーム</a></li>
21 </ul>
22</nav>
23</header>
24</body>
25</html>
26
27
28css3
29@charset "utf-8";
30/* CSS Document */
31body {
32	margin: 0;
33	display: grid;
34	grid-template-columns: 1fr 900px 1fr;
35	grid-template-rows: auto auto auto;
36}
37
38
39header {
40	display:grid;
41	grid-column-start: 1;
42	grid-column-end: -1;
43	background-color:#0C0;
44}
45
46/*メニュー*/
47nav {
48	grid-column-start: 2;
49	grid-column-end: -2;
50	grid-row-start:2;
51	display: grid;
52	grid-template-columns: inherit;
53	background-color: #09C;
54}
55
56ul {
57	display: flex;
58}
59
60.nav1 {
61	margin-right: auto;
62	padding: 0px;
63}
64
65nav ul li {
66	list-style: none;
67	padding: 0px 10px;
68}
69