marginが適用されない

問題内容

Progate中級編に取り組んでいます。

クラスtxt-contentsの上部に15pxのmarginが適用されない理由と対処法を教えていただきたいです。

よろしくお願いします。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12  <header>
13    <div class="container">
14      <div class="header-left">
15        <img src="https://prog-8.com/images/html/advanced/main_logo.png">
16      </div>
17      <div class="header-right">
18        <a href="#">ログイン</a>
19      </div>
20    </div>
21  </header>
22  
23  <div class="top-wrapper">
24    <div class="container">
25      <h1>LEARN TO CODE.</h1>
26      <h1>LEARN TO BE CREATIVE.</h1>
27      <p>Progateはオンラインプログラミング学習サービスです。</p>
28      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
29      <div class="btn-wrapper">
30        <a href="#" class="btn signup">新規登録はこちら</a>
31        <p>or</p>
32        <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
33        <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
34      </div>
35    </div>
36  </div>
37  
38  <div class="lesson-wrapper">
39    <div class="container">
40      <div class="heading"><h2>Learn Where to Get Started!</h2></div>
41      <div class="lessons">
42        <div class="lesson">
43          <div class="lesson-icon">
44            <img src="https://prog-8.com/images/html/advanced/html.png">
45            <p>HTML & CSS</p>
46          </div>
47          <div class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</div>
48        </div>
49        <div class="lesson">
50          <div class="lesson-icon">
51            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
52            <p>jQuery</p>
53          </div>
54          <div class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</div>
55        </div>
56        <div class="lesson">
57          <div class="lesson-icon">
58            <img src="https://prog-8.com/images/html/advanced/ruby.png">
59            <p>Ruby</p>
60          </div>
61          <div class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</div>
62        </div>
63        <div class="lesson">
64          <div class="lesson-icon">
65            <img src="https://prog-8.com/images/html/advanced/php.png">
66            <p>PHP</p>
67          </div>
68          <div class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</div>
69        </div>
70      </div>
71    </div>
72  </div>
73  
74</body>
75</html>

CSS
1/* CSSのリセット（消さないでください） */
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/* CSSのリセット（消さないでください） */
23html, body,
24ul, ol, li,
25h1, h2, h3, h4, h5, h6, p, div {
26  margin: 0;
27  padding: 0;
28}
29
30body {
31  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
32}
33
34li {
35  list-style: none;
36}
37
38a {
39  text-decoration: none;
40}
41
42/* ここからCSSを書いていきましょう */
43header {
44  background-color: rgba(34, 49, 52, 0.9);
45  z-index: 10;
46  position: fixed;
47  width: 100%;
48  height: 65px;
49}
50
51.header-left {
52  float: left;
53}
54
55.header-left img {
56  width: 124px;
57  padding: 20px 0;
58}
59
60.header-right {
61  background-color: rgba(255, 255, 255, 0.3);
62  float: right;
63}
64
65.header-right a {
66  line-height: 65px;
67  display: inline-block;
68  padding: 0 25px;
69  color: white;
70}
71
72.header-right:hover {
73  background-color: rgba(255, 255, 255, 0.5);
74  transition: all 1s;
75}
76
77.top-wrapper {
78  padding: 180px 0 100px 0;
79  text-align: center;
80  background-image:url(https://prog-8.com/images/html/advanced/top.png);
81  background-size: cover;
82  
83}
84
85.container {
86  width: 1170px;
87  margin: 0 auto;
88}
89
90.container h1{
91  color: white;
92  opacity: 0.7;
93  font-size: 45px;
94  letter-spacing: 5px;
95}
96
97.top-wrapper p {
98  color: white;
99  opacity: 0.7;
100}
101
102.btn-wrapper {
103  margin-top: 30px;
104}
105
106.btn {
107  display: inline-block;
108  padding: 8px 24px;
109  color: white;
110  border-radius: 5px;
111}
112
113.btn:hover {
114  opacity: 1;
115}
116
117.signup {
118  background-color: #239b76;
119  opacity: 0.8;
120}
121
122.facebook {
123  background-color: #3b5998;
124  opacity: 0.8;
125  margin-right: 10px;
126}
127
128.twitter {
129  background-color: #55acee;
130  opacity: 0.8;
131}
132
133.fa {
134  margin-right: 5px;
135}
136
137
138.btn-wrapper p {
139  margin: 15px 0;
140}
141
142.lesson-wrapper {
143  height: 580px;
144  text-align: center;
145  background-color: #f7f7f7;
146}
147
148.heading h2 {
149  padding: 80px 0 50px 0;
150  font-weight: normal;
151  color: #5f5d60;
152}
153
154.lesson {
155 float: left;
156 width: 25%;
157}
158
159.lesson-icon {
160  position: relative;
161}
162
163.lesson-icon p {
164  position: absolute;
165  top: 50%;
166  width: 100%;
167  color: white;
168}
169
170.txt-contents {
171  margin-top: 15px;
172  width: 80%;
173  margin: 0 auto;
174  color: #b3aeb5;
175  font-size: 13px;
176}