Atomでjustify-itemsが適用されない


現在ドットインストールを見ながらグリッドレイアウトについて学んでいます
justify-itemsと入力すると文字が灰色になってしまい適用されません
![イメージ説明](25954e56d82264f7b766ad6e8a65b61f.png)

このような感じになります。
justify-content以外の候補が出てきません。
コメントアウトしているわけではないし、もしかしたら文字自体を間違えているかと思いコピペもしてみましたがダメです。
再インストールもしてみましたが効果がありません。
この問題の解決方法をご存知の方がおられましたらお教えください。

```html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid Layout</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <div class="container">
      <div class="item-1">1</div>
      <div class="item-2">2</div>
      <div class="item-3">3</div>
      <div class="item-4">4</div>
      <div class="item-5">5</div>
      <div class="item-6">6</div>
      <div class="item-7">7</div>
      <div class="item-8">8</div>
      <div class="item-9">9</div>
    </div>
  </body>
</html>

css
1body{
2  padding: 0;
3  margin: 0;
4}
5
6.container{
7  background: #eee;
8  width:300px;
9  height:300px;
10  display: grid;
11  grid-template-rows:80px 80px 80px;
12  grid-template-columns:80px 80px 80px;
13  /* justify-content:end;
14  align-content: center; */
15  justify-items:end;
16  align-items: center;
17}
18
19.item-1{
20  background: hsl(300, 80%, 30%);
21  justify-self:center;
22  align-items: center;
23}
24.item-2{
25  background: hsl(300, 80%, 40%);
26
27}
28.item-3{
29  background: hsl(300, 80%, 50%);
30
31}
32.item-4{
33  background: hsl(200, 80%, 30%);
34
35}
36.item-5{
37  background: hsl(200, 80%, 40%);
38
39}
40.item-6{
41  background: hsl(200, 80%, 50%);
42
43}
44.item-7{
45  background: hsl(100, 80%, 30%);
46
47}
48.item-8{
49  background: hsl(100, 80%, 40%);
50
51}
52.item-9{
53  background: hsl(100, 80%, 50%);
54
55}
56