模写をしているのですが、途中から反映されなくなってしまいました。

模写コーディングに挑戦しています。まずtop-wrapperから作成していきそこまでは順調だったのですが、headerに入るとまったく反映されなくなってしまいました。top-wrapperの下のlesson-wrapperも少し書いてみたのですが反映されません。原因わかりましたら教えていただけると幸いです。よろしくお願い致します。

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <link rel="stylesheet" href="stylecss.css">
7  <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
8  <title>progate</title>
9</head>
10<body>
11  <header>
12    <div class="cotainer">
13      <div class="header-left">
14        <img  class="logo" src="main_logo.png">
15      </div>
16      <div class="header-right">
17          <a href="#">レッスン</a>
18          <a href="#">新規登録</a>
19          <a href="#">ログイン</a>
20      </div>
21    </div>
22  </header>
23
24  <section class="top-wrapper">
25    <div class="container">
26      <h1>LEARN TO CODE. <br>LEARN TO BE CREATIVE.</h1>
27
28      <p>progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
29    </div>
30    <div class="btn-wrapper">
31      <a class="btn signin" href="#">新規登録はこちら</a>
32      
33      <p>or</p>
34      
35      <a class="btn facebook" href="#"><i class="fab fa-facebook-f"></i>Facebookで登録</a>
36      <a class="btn twitter" href="#"><i class="fab fa-twitter"></i>Twitterで登録</a>
37      
38    </div>
39  </section>
40  <section class="lesson-wrapper">
41    <div class="container">
42      <div heading>
43        <h2>Learn Where to Started!</h2>
44      </div>
45      <div class="lessons">
46        <div class="lesson">
47          <div class="lesson-icon">
48            <img src="" alt="">
49            <p></p>
50          <div class="lesson-text">
51            <p></p>
52          </div>
53          </div>
54        </div>
55      </div>
56    </div>
57
58  </section>
59  <section>
60
61  </section>
62  <footer>
63
64  </footer>
65  
66</body>
67</html>

css
1body{
2  margin: 0;
3}
4header{
5  background-color:rgba(34,49,52,0.9);
6  width:100%;
7  height:65px;
8  position:fixed;
9  top:0;
10  z-index:10;
11}
12.top-wrapper{
13  background-image: url("https://prog-8.com/images/html/advanced/top.png");
14  background-size: cover;
15  padding: 180px 0 100px 0;
16  text-align: center;
17  box-sizing: border-box;
18}
19
20section .container{
21  width: 100%;
22  padding: 0 15px;
23  margin: 0 auto;
24  color: white;
25}
26.top-wrapper h1{
27  font-size: 45px;
28  opacity: 0.7;
29  letter-spacing: 5px;
30}
31
32.container p{
33  font-size: 16px;
34  opacity: 0.7;
35  margin-bottom: 40px;
36}
37
38.btn-wrapper .btn{
39  display: inline-block;
40  text-decoration: none;
41  opacity: 0.8;
42  padding: 8px 24px;
43  border-radius: 4px;
44  color: white;
45
46}
47
48.btn-wrapper .signin{
49background-color:#239b76;
50}
51
52.btn-wrapper p{
53  font-size: 16px;
54  opacity: 0.7;
55  margin-bottom: 15px;
56  color: white;
57}
58
59.btn-wrapper .facebook{
60  background-color: #3b5998;
61  margin-right: 10px;
62}
63
64.btn-wrapper .twitter{
65  background-color: #55acee;
66
67} 
68
69svg{
70  margin-right: 5px;
71}

追記：ブラウザで表示される画像を追加しました。
【サンプル】ようなヘッダーを表示させたいのですが、
私のコードでは【私の画像】のような表示になり、ヘッダーが全くでてきません。

【サンプル】

【私の画像】

kei344

2020/05/31 06:41

「反映されません」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。

akkko

2020/05/31 06:58

確かにそうですよね、アドバイスありがとうございます。質問内容に追記しました。不足内容があればまた教えて下さい。

akkko

2020/05/31 07:02

大変失礼いたしました。いろいろいじってたらでてきました。もうしわけありません。ありがとうございました。

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

回答2件

自己解決

すみません、いろいろいじってたら表示されました。

投稿2020/05/31 07:04

akkko

総合スコア2

背景が白で、文字も白なので表示されていないのでは。色については.top-wrapperに限定すればよいのではないでしょうか。

CSS
1.top-wrapper .container{
2  width: 100%;
3  padding: 0 15px;
4  margin: 0 auto;
5  color: white;
6}
7```**動くサンプル：**[https://jsfiddle.net/kqjdcLeg/1/](https://jsfiddle.net/kqjdcLeg/1/)