footerのcssを変更しても反映されない

前提・実現したいこと

ドットインストールcss講座#15回目でフッターの調整をしている時に発生しました。
cssでfooterのプロパティを変更しても全く変更出来ません。
footer{
width:400px;
margin:0 auto;
を適用させたいです。

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

footerがcssで変更できない。
w3c-validationを使ったのでそちらのエラー文を載せます

at line 56Lexical error at line 55, column 80. Encountered: "\b" (8), after : ""
}

at line 73Lexical error at line 71, column 1. Encountered: "\b" (8), after : ""
}

at line 2You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
color: #333;
at line 31You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
color: inherit;
at line 35You have no background-color set (or background-color is set to transparent) but you have set a color. Make sure that cascading of colors keeps the text reasonably legible.
color: royalblue;

該当のソースコード

html
1<!DOCTYPE html>
2<html lang = "ja">
3  <head>
4    <meta charset="utf-8">
5    <title>太郎のポートフォリオ</title>
6    <link rel = "icon" href = "favicon.ico">
7    <meta name = "description" content = "太郎のポートフォリオサイトです。">
8
9    <link rel="stylesheet" href="css/style.css">
10  </head>
11
12  <body>
13     <!-- header -->
14      <header>
15        <nav>
16          <ul>
17            <li>
18              <a href="index.html">
19                HOME
20              </a>
21            </li>
22
23            <li>
24              <a href="about.html">
25                ABOUT
26              </a>
27            </li>
28          </ul>
29
30        </nav>
31      </header>
32
33      <section>
34        <!-- 自己紹介 -->
35        <img src = "image/taro.png" width = "140" height = "140" alt = "太郎のアイコン" class = "icon">
36        <h1>山田太郎</h1>
37        <p>UI/UXデザイナー見習いです</p>
38
39        <!-- ゲーム紹介 -->
40        <div class = "works">
41          <section>
42            <img src = "image/work1.png" width = "400" height = "260" alt = "勇者ゲーム">
43            <h1>勇者ゲーム</h1>
44            <p>楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p>
45          </section>
46
47          <section>
48            <img src = "image/work2.png" width = "400" height = "260" alt = "宝探しゲーム">
49            <h1>宝探しゲーム</h1>
50            <p>楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p>
51          </section>
52
53          <section>
54            <img src = "image/work3.png" width = "400" height = "260" alt = "神経衰弱">
55            <h1>神経衰弱</h1>
56            <p>楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです楽しいアプリです</p>
57          </section>
58
59        </div>
60      </section>
61      <!-- footer -->
62      <footer>
63        <ul>
64          <li>
65            <a href = "mailto:t.sakurai816@gmail.com" target="_blank">
66              <img src = "image/mail.png" width = "20" height = "20" alt = "メール送信">
67            </a>
68          </li>
69
70          <li>
71            <a href = "https://dotinstall.com" target="_blank">
72              <img src = "image/blog.png" width = "20" height = "20" alt = "ブログサイトへ">
73            </a>
74          </li>
75
76          <li>
77            <a href = "https://dotinstall.com" target="_blank">
78              <img src = "image/photos.png" width = "20" height = "20" alt = "写真サイトへ">
79            </a>
80          </li>
81
82        </ul>
83        <p>(c) Taro Yamada</p>
84      </footer>
85
86
87  </body>
88</html>
89

css
1body {
2  color: #333;
3  font-family: Verdana, sans-serif;
4  margin: 0;
5}
6
7header {
8  text-align: right;
9  padding: 10px;
10  background-image: url(../image/header.png);
11  height: 240px;
12  background-size: cover;
13  background-position: 50% 50%;
14  margin-bottom: 60px;
15}
16
17header ul {
18  margin: 0;
19  list-style-type: none;
20  padding-left: 0;
21}
22
23header li {
24  display: inline-block;
25  padding: 4px 8px;
26  font-size: 12px;
27}
28
29header li > a {/*li要素の直下のaという意味*/
30  text-decoration: none;
31  color: inherit;
32}
33
34header li > a:hover {
35  color: royalblue;
36}
37
38section {
39  text-align: center;
40}
41
42section h1 {
43  font-weight: normal;
44  margin-top: 8px;
45}
46
47section p {
48  margin-top: 0;
49  font-size:14px;
50}
51
52.icon {
53  border-radius: 50%;
54  border: white 5px solid;
55  box-shadow: 0 0 5px gray;/*円に影がつくことで縁みたいになる*/
56}
57.works {
58  width: 400px;
59  margin: 60px auto;
60  border-bottom: 1px solid gray;
61}
62
63.works >section {
64  margin-bottom: 40px;
65}
66.works h1,
67.works p {/*複数行指定は「,」で区切る*/
68  text-align: left;
69}
70
71footer {
72  width:400px;
73  margin: 0 auto;
74}


### 試したこと

w3c-validation を使いエラー文を読み対処してみましたが、エラーが消えなかったです。


### 補足情報（FW/ツールのバージョンなど）
エディタ：Atom(1.38.1)
ブラウザ：GoogleCrome(76.0.3809.100（Official Build） （64 ビット）)

まったく検討違いだったら申し訳ないのですが、HTMLで<body>からインデントガイドが2本出ているのはなにか関係があるでしょうか？
消そうと思って改行を外したり、コメントを消したり試行錯誤しましたが、消えませんでした。