左右の余白の消し方について教えてください

koji portfolio　書いたある部分を囲んでいる部分の左右に余白ができてしまいます。その余白を消したいです。　フッターとヘッダーの部分には余白ができていないのにそこだけできてしまっています。
はじめての質問で伝わらない、伝え方が下手かもしれませんが分かる方教えていただきたいです。
よろしくお願いいたします。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>top</title>
    <meta name="viwport" content="width=device-width, initila-scale=1">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.css">
  </head>
  <body>
    <div id="container" class="animated">
    <header id="toppage">
      <nav>
        <ul>
          <li><a href="#top">TOP</a></li>
          <li><a href="#top">ABOUT</a></li>
          <li><a href="#skill">SKILL</a></li>
          <li><a href="#works">WORKS</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>
      </nav>
    </header>
    <div id="content">
        <section id="top">
          <h1>KOJI</h1>
          <p>PORTFOLIO</p>
        </section>
        <section id="about">
          <h2>ABOUT</h2>
        </section>
        <section id="skill">
          <h2>SKILL</h2>
        </section>
        <section id="works">
          <h2>WORKS</h2>
        </section>
    </div>
    <footer>
      <section id="contact">
        <h2>CONTACT</h2>
      </section>
    </footer>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>
  <script src="main.js"></script>
  </body>
</html>

/* Base */

body {
  font-family: Mejiro;
  background-color: white;
  letter-spacing: 3px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  margin: 0;
  height: 100%;
}

#container {
  position: relative;
  min-height: 100%;
}

#content {
  min-height: 100vh;
  position: relative;
  padding-bottom: 120px;
  padding-bottom: 50px;
}


a {
  color: #666666;
  text-decoration: none;
  outline: none;
}

a:hover {
  text-decoration: underline;
}

/* header */
header {
  text-align: center;
  margin-top: 10px;
  border-bottom: 1px solid #ddd;
}

nav ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

nav ul li {
  width: 20%;
  height: 30px;
  list-style: none;
  border-top: 5px solid #fff;
  border-bottom: 5px solid #fff;
}

nav ul li:hover {
  border-bottom: 5px solid #666666;
}

nav ul li a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

nav ul li a:hover {
  text-decoration: none;
}

/* Footer */
footer {
  width: 100%;
  background-color: gray;
  color: white;
  text-align: center;
  position: absolute;
}

#contact {
  padding: 10px 0;
  text-align: center;
  background-position: center;
  background-repeat: no-repeat;
}

.btn {
  width: 200px;
  margin: 10px;
  padding: 15px;
  display: inline-block;
  border-radius: 5px;
  text-align: center;
  letter-spacing: 0.05em;
}

footer a {
  color: white;
} 

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background-color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Content */
section {
  text-align: center;
}

#content {
  width: 95%;
  margin: 30px auto;
}

#top {
  width: 100%;
  text-align: center;
  line-height: 1;
  background-color: #666666;
  padding: 0;
  margin: 0;
}

#top h1 {
  color: white;
  font-size: 80px;
  margin: 20px 0 0 20px;
  padding: 0;
}

#top p {
  font-size: 40px;
  color: #BBBBBB;
  margin: 0;
  padding: 0;
}

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

回答1件

これでできます。

css
1/* Base */
2
3body {
4  font-family: Mejiro;
5  background-color: white;
6  letter-spacing: 3px;
7  font-size: 15px;
8  line-height: 1.5;
9  color: #333;
10  margin: 0;
11  height: 100%;
12}
13
14#container {
15  position: relative;
16  min-height: 100%;
17}
18
19#content {
20  min-height: 100vh;
21  position: relative;
22  padding-bottom: 120px;
23  padding-bottom: 50px;
24}
25
26
27a {
28  color: #666666;
29  text-decoration: none;
30  outline: none;
31}
32
33a:hover {
34  text-decoration: underline;
35}
36
37/* header */
38header {
39  text-align: center;
40  margin-top: 10px;
41  border-bottom: 1px solid #ddd;
42}
43
44nav ul {
45  display: flex;
46  justify-content: space-between;
47  margin: 0;
48  padding: 0;
49}
50
51nav ul li {
52  width: 20%;
53  height: 30px;
54  list-style: none;
55  border-top: 5px solid #fff;
56  border-bottom: 5px solid #fff;
57}
58
59nav ul li:hover {
60  border-bottom: 5px solid #666666;
61}
62
63nav ul li a {
64  display: inline-block;
65  width: 100%;
66  height: 100%;
67}
68
69nav ul li a:hover {
70  text-decoration: none;
71}
72
73/* Footer */
74footer {
75  width: 100%;
76  background-color: gray;
77  color: white;
78  text-align: center;
79  position: absolute;
80}
81
82#contact {
83  padding: 10px 0;
84  text-align: center;
85  background-position: center;
86  background-repeat: no-repeat;
87}
88
89.btn {
90  width: 200px;
91  margin: 10px;
92  padding: 15px;
93  display: inline-block;
94  border-radius: 5px;
95  text-align: center;
96  letter-spacing: 0.05em;
97}
98
99footer a {
100  color: white;
101} 
102
103.btn:hover {
104  text-decoration: none;
105}
106
107.btn-primary {
108  background-color: white;
109  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
110}
111
112/* Content */
113section {
114  text-align: center;
115}
116
117#content {
118  width: 100%;
119  margin: 30px auto;
120}
121
122#top {
123  width: 100%;
124  text-align: center;
125  line-height: 1;
126  background-color: #666666;
127  padding: 0;
128  margin: 0;
129}
130
131#top h1 {
132  color: white;
133  font-size: 80px;
134  margin: 20px 0 0 20px;
135  padding: 0;
136}
137
138#top p {
139  font-size: 40px;
140  color: #BBBBBB;
141  margin: 0;
142  padding: 0;
143}
144