CSSで指定した内容が一部反映されません　Progate 道場コース　中級編

前提・実現したいこと

CSSで指定した内容をページに反映させたい。

発生している問題

lesson-wrapperというクラスに対して、

height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;

この４つの内容をCSSで反映させたいのですがうまくいきません。

エラーメッセージ

なし

該当のソースコード

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 class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png" alt="" />
16      </div>
17      <div class="header-right">
18        <a href="#" class="login">ログイン</a>
19      </div>
20    </div>
21  </header>
22  
23  <div class="top-wrapper">
24    <div class="container">
25      <h1>
26        LEARN TO CODE.
27        <br>LEARN TO BE CREATIVE.
28      </h1>
29      <p>
30        Progateはオンラインプログラミング学習サービスです。
31        <br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。
32      </p>
33      <a href="#" class="btn signup">新規登録はこちら</a>
34      <p>or</p>
35      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
36      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
37      
38    </div>
39  </div>
40  
41  <div class="lesson-wrapper">
42    <div class="container">
43      <div class="heading">
44        <h2>Learn Where to Get Started!</h2>
45      </div>
46
47      <div class="lessons">
48        
49        <div class="lesson">
50          <div class="lesson-icon">
51            <img src="https://prog-8.com/images/html/advanced/html.png"/>
52            <p>HTML & CSS</p>
53          </div>
54          <p class="txt-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
55        </div>
56        
57        <div class="lesson">
58          <div class="lesson-icon">
59            <img src="https://prog-8.com/images/html/advanced/jQuery.png"/>
60            <p>jQuery</p>
61          </div>
62          <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
63        </div>  
64          
65        <div class="lesson">
66          <div class="lesson-icon">
67            <img src="https://prog-8.com/images/html/advanced/ruby.png"/>
68            <p>Ruby</p>
69          </div>
70          <p class="txt-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
71        </div>
72          
73        <div class="lesson">
74          <div class="lesson-icon">
75            <img src="https://prog-8.com/images/html/advanced/php.png"/>
76            <p>PHP</p>
77          </div>
78          <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
79        </div>
80      </div>
81    </div>
82  </div>
83  
84</body>
85</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を書いていきましょう */
22header {
23  height:65px;
24  width:100%;
25  background-color:rgba(34, 49, 52, 0.9);
26  position:fixed;
27  top:0;
28  z-index:10;
29}
30
31.header-left {
32  float:left;
33}
34
35.header-right {
36  float:right;
37  background-color:rgba(255, 255, 255, 0.3);
38  transition:all 0.5s;
39}
40
41.logo {
42  width:124px;
43  padding-top:20px;
44}
45
46.header-right a {
47  color:white;
48  padding:0 25px;
49  line-height:65px;
50}
51
52.top-wrapper {
53  padding:180px 0 100px 0;
54  background-image:url(https://prog-8.com/images/html/advanced/top.png);
55  color:white;
56  background-size:cover;
57  text-align:center;
58}
59
60.container {
61  width:1170px;
62  padding:0 15px;
63  margin:auto;
64}
65
66.container h1 {
67  font-size:45px;
68  letter-spacing:5px;
69  opacity:0.7;
70}
71
72.top-wrapper p {
73  opacity:0.7;
74  margin-bottom:15px;
75}
76
77.btn {
78  padding:8px 24px;
79  color:white;
80  display:inline-block;
81  opacity:0.8;
82  border-radius:4px;
83  
84}
85
86.signup {
87  background-color:#239b76;
88  margin-top:15px;
89  margin-bottom:15px;
90}
91
92.facebook {
93  background-color:#3b5998;
94  margin-right:10px;
95}
96
97.twitter {
98  background-color:#55acee;
99}
100
101.lessson-wrapper {
102  height:500px;
103  padding-bottom:80px;
104  background-color:#f7f7f7;
105  text-align:center;
106}
107
108.heading {
109  padding-top:80px;
110  padding-bottom:50px;
111  color:#5f5d60;
112}
113
114.heading h2 {
115  font-weight:normal;
116}
117
118.lesson {
119  float:left;
120  width:25%;
121}
122
123.lesson-icon {
124  position:relative;
125}
126
127.lesson-icon p {
128  position:absolute;
129  top:44%;
130  width:100%;
131  color:white;
132}
133
134.txt-contents {
135  width:80%;
136  display:inline-block;
137  margin-top:15px;
138  font-size:13px;
139  color:#b3aeb5;
140}

試したこと

VS Codeの拡張機能やDirtyMarkupを使ってミスを確認できるか試したのですが確認できませんでした。
このコードのままchromeで検証してみると、lesson-wrapperに指定したつもりのCSSの内容がまるっきり入っていないのが確認できた為、検証の画面上でその内容を入力してみると正しく表示されました。
どうやったらちゃんと反映させられるのか方法がわかりません。

補足情報（FW/ツールのバージョンなど）

OS: MacOS Catalina 10.15.5
ブラウザ: Chrome

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

回答1件

ベストアンサー

.lessson-wrapperについて、「s」が1つ多いようです。

誤: .lessson-wrapper
正: .lesson-wrapper

CSS
1.lessson-wrapper {
2  height:500px;
3  padding-bottom:80px;
4  background-color:#f7f7f7;
5  text-align:center;
6}

投稿2020/05/30 09:44

new1ro

総合スコア4528

hiro009

2020/05/30 11:39

ご回答ありがとうございます！ご指摘の内容で無事先に進めました！３時間以上格闘しても見つけられなかったので大変助かりました。ありがとうございます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！