Progate HTML&CSS　道場コース　中級編　トップ部分を作ろうにて両端に空白ができてしまいます

Progate HTML&CSSの道場コース　中級編　トップ部分を作ろうにて
Progateの見本の背景画像と比べた際に、謎の余白ができてしまいます。
見本と同じようにしたいのですが、どうしても解決策が見つからないので、教えていただけたら嬉しいです。
初歩的で申し訳ありませんが、よろしくお願い致します。

html
1<自分の書いたコード>
2
3<!DOCTYPE html>
4<html>
5<head>
6  <meta charset="utf-8">
7  <title>Progate</title>
8  <link rel="stylesheet" href="stylesheet.css">
9  <!-- ここでFont Awesomeを読み込んでください -->
10  
11</head>
12<body>
13  <!-- ここにコードを書いていきましょう -->
14  <div class="container">
15    <header></header>
16    <div class="wrapper">
17      <div class=main>
18        <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
19        <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
20        <a href="#" class="btn signup">新規登録はこちら</a>
21        <p>or</p>
22        <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
23        <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
24      </div>
25    </div>
26    <footer></footer>
27  </div>
28</body>
29</html>

css
1 <自分の書いたコード>
2
3html, body,
4ul, ol, li,
5h1, h2, h3, h4, h5, h6, p, div {
6  margin: 0;
7  padding: 0;
8}
9
10body {
11  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
12}
13
14li {
15  list-style: none;
16}
17
18a {
19  text-decoration: none;
20}
21
22/* ここからCSSを書いていきましょう */
23.container {
24  width : 1170px;
25  margin: 0 auto;
26}
27
28.wrapper {
29  background-image: url(https://prog-8.com/images/html/advanced/top.png);
30  background-size: cover;
31  padding: 180px 0 100px 0;
32  text-align: center;
33  color: white;
34}
35
36.main h1 {
37  font-size: 45px;
38  letter-spacing: 5px;
39  opacity: 0.7;
40}
41
42.main p {
43  opacity: 0.7;
44  margin-bottom: 15px;
45}
46
47.btn {
48  border-radius: 4px;
49  padding: 8px 24px;
50  color: white;
51  opacity: 0.8;
52  display: inline-block;
53}
54
55.btn:hover {
56  opacity: 1;
57}
58
59.signup {
60  background-color: #239b76;
61  margin-top: 15px;
62  margin-bottom: 15px;
63}
64
65.facebook {
66  background-color: #3b5998;
67  margin-right: 10px;
68}
69
70.twitter {
71  background-color: #55acee;
72}
73
74.fa {
75  margin-right: 5px;
76}

html
1<見本のコード>
2<!DOCTYPE html>
3<html>
4<head>
5  <meta charset="utf-8">
6  <title>Progate</title>
7  <link rel="stylesheet" href="stylesheet.css">
8  <!-- ここでFont Awesomeを読み込んでください -->
9  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
10</head>
11<body>
12  <!-- ここにコードを書いていきましょう -->
13  <div class="top-wrapper">
14    <div class="container">
15      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
16      <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
17      <a href="#" class="btn signup">新規登録はこちら</a>
18      <p>or</p>
19      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
20      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
21    </div>
22  </div>
23</body>
24</html>

css
1<見本のコード>
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22.container {
23  width : 1170px;
24  margin: 0 auto;
25}
26
27.wrapper {
28  background-image: url(https://prog-8.com/images/html/advanced/top.png);
29  background-size: cover;
30  padding: 180px 0 100px 0;
31  text-align: center;
32  color: white;
33}
34
35.main h1 {
36  font-size: 45px;
37  letter-spacing: 5px;
38  opacity: 0.7;
39}
40
41.main p {
42  opacity: 0.7;
43  margin-bottom: 15px;
44}
45
46.btn {
47  border-radius: 4px;
48  padding: 8px 24px;
49  color: white;
50  opacity: 0.8;
51  display: inline-block;
52}
53
54.btn:hover {
55  opacity: 1;
56}
57
58.signup {
59  background-color: #239b76;
60  margin-top: 15px;
61  margin-bottom: 15px;
62}
63
64.facebook {
65  background-color: #3b5998;
66  margin-right: 10px;
67}
68
69.twitter {
70  background-color: #55acee;
71}
72
73.fa {
74  margin-right: 5px;
75}

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

回答1件

ベストアンサー

html
1<body>
2  <div class="container">
3    <div class="wrapper">
4      <div class=main>
5
6      </div>
7    </div>
8    <footer></footer>
9  </div>
10</body>

.container > .wrapper > .main という親子関係になってます。

.container に width : 1170px; を設定しています。

背景画像は、.wrapper に設定しています。
.wrapper は .container の子なので親のサイズ width : 1170px; を超えることができないので画面幅が1170px以上なら余白ができます。

解決法の一つは、.wrapper と .container の親子関係を入れ替えればいいでしょう。

html
1<body>
2  <div class="wrapper">
3    <div class="container">
4      <div class=main>
5
6      </div>
7    </div>
8    <footer></footer>
9  </div>
10</body>