html,CSSで<padding><margin>を"0"にしたい。

前提・実現したいこと

ドットインストールcssレイアウト入門#11を学習中です。
<padding>と<margin>をゼロにしたいのですが、添付画像の通りうまく出来ません。
よろしければ、ご教示ください。

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

"menu"を認識していないようです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf8">
5<title>CSS Layout Practice</title>
6<link rel="stylesheet" href="normalize.css">
7<link rel="stylesheet" href="styles.css">
8</head>
9 <body>
10   <header>
11       <div class="container">
12       <ul id="menu>"
13       <ul><a href="">Menu 1</a></ul>
14       <ul><a href="">Menu 2</a></ul>    
15       <ul><a href="">Menu 3</a></ul>    
16       </div>
17   </header>
18   <main>
19       <div class="container">
20         main
21       </div>
22          </main>
23   <footer>
24       <div class="container">
25       footer    
26       </div>
27   </footer>
28 </body>
29</html>
30

css
1 .container {
2     width: 500px;
3     margin: 0 auto;
4}
5 
6header {
7    background: tomato;
8}
9
10ul#menu {
11    padding: 0;
12    margin: 0;
13}
14main {
15    background: skyblue;
16}
17
18#left {
19     background: limegreen;
20     float: left;
21     width: 20%;
22}
23     
24#center {
25     background: seagreen;
26     float: left;
27     width: 60%;
28 }
29 
30#right {
31     background: lightgreen;
32     float: left;
33     width: 20%;
34}
35
36.clearfix::after{
37    content: '';
38    display: block;
39    clear: both;
40}
41
42
43footer {
44    clear: both;
45    background: slategray;
46}