プロゲート道場レッスン中級編　自分の回答と答えで赤く囲まれた部分が白いためどのように違うのかが分かりません

実現したいこと

プロゲートの道場レッスン、中級編をしています。
自分の回答が間違っているため次に進めないのですが、答えで示されている赤く囲まれた部分がほとんど白いところを示しているためどの部分のコードが間違えているのかが分かりません。

発生している問題・分からないこと

エラーメッセージ

error
1赤く囲まれた部分の見直し

該当のソースコード

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

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p, div {
4  margin: 0;
5  padding: 0;
6}
7
8body {
9  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
10}
11
12li {
13  list-style: none;
14}
15
16a {
17  text-decoration: none;
18}
19
20/* ここからCSSを書いていきましょう */
21.topA{
22  background-image:url(https://prog-8.com/images/html/advanced/top.png);
23  background-size:cover;
24  padding:180px 0 100px 0;
25  text-align:center
26}
27
28.top{
29  width:1170px;
30  margin: 0 auto;
31}
32
33h1{
34  color:white;
35  font-size:45px;
36  letter-spacing: 5px;
37  opacity: 0.7
38}
39
40.top p{
41  color:white;
42  opacity:0.7;
43}
44
45.A{
46  display:inline-block;
47  margin-top:30px;
48  padding:8px 24px;
49  color:white;
50  background-color:#239b76;
51  opacity:0.8;
52}
53
54.or{
55  padding:15px 0;
56}
57.B{
58  display:inline-block;
59  color:white;
60  margin-right:10px;
61  padding:8px 24px;
62  background-color:#3b5998;
63  opacity:0.8;
64}
65
66.C{
67  display:inline-block;
68  color:white;
69  background-color:#55acee;
70  padding:8px 24px;
71  opacity:0.8;
72}
73
74span{
75  padding-right:5px;
76}
77
78.btn:hover {
79  opacity: 1;
80}
81
82.btn{
83  border-radius: 4px;
84}
85
86header{
87  height:65px;
88  background-color:rgba(34, 49, 52, 0.9);
89  width: 100%;
90  position:fixed;
91  top:0;
92  z-index:10;
93}
94
95.logo{
96  float:left;
97}
98
99.logoA{
100  width:124px;
101  margin-top:20px;
102}
103
104.logo1{
105  float:right;
106  background-color:rgba(255, 255, 255, 0.3)
107}
108
109.logo1:hover{
110  background-color:rgba(255, 255, 255, 0.5);
111  transition:all 0.5s;
112  
113}
114
115.logo1 a{
116  float:right;
117  display:block;
118  color:white;
119  line-height:65px;
120  padding:0 25px;
121}
122
123.mainA{
124  height:580px;
125  background-color:#f7f7f7;
126  text-align:center;
127}
128
129.main{
130  padding-top:80px;
131  padding-bottom:50px;
132}
133
134h2{
135  font-weight:normal;
136  color:#5f5d60;
137}
138
139.class{
140  float:left;
141  width:25%;
142}
143
144.icon{
145  position: relative;
146}
147
148.icon p{
149  position: absolute;
150  color:white;
151  top:90px;
152  width:100%;
153}
154
155.t{
156  width: 80%;
157  display: inline-block;
158  margin-top:15px;
159  font-size:13px;
160  color:#b3aeb5!important;
161}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <header>
    <div class="container">
      <div class="header-left">
        <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png">
      </div>
      <div class="header-right">
        <a href="#" class="login">ログイン</a>
      </div>
    </div>
  </header>
  <div class="top-wrapper">
    <div class="container">
      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
      <p>Progateはオンラインプログラミング学習サービスです。<br>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
      <a href="#" class="btn signup">新規登録はこちら</a>
      <p>or</p>
      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
    </div>
  </div>
  <div class="lesson-wrapper">
    <div class="container">
      <div class="heading">
        <h2>Learn Where to Get Started!</h2>
      </div>
      <div class="lessons">
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/html.png">
            <p>HTML & CSS</p>
          </div>
          <p class="text-contents">ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/jQuery.png">
            <p>jQuery</p>
          </div>
          <p class="text-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/ruby.png">
            <p>Ruby</p>
          </div>
          <p class="text-contents">オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p>
        </div>
        <div class="lesson">
          <div class="lesson-icon">
            <img src="https://prog-8.com/images/html/advanced/php.png">
            <p>PHP</p>
          </div>
          <p class="text-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* ここからcssを書いていきましょう */
.top-wrapper {
  padding: 180px 0 100px 0;
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  color: white;
  text-align: center;
}

.container {
  width: 1170px;
  margin: 0 auto;
}

.top-wrapper h1 {
  opacity: 0.7;
  font-size: 45px;
  letter-spacing: 5px;
}

.top-wrapper p {
  opacity: 0.7;
  margin-bottom: 15px;
}

.signup {
  background-color: #239b76;
  margin-top: 15px;
  margin-bottom: 15px;
}

.facebook {
  background-color: #3b5998;
  margin-right: 10px;
}

.twitter {
  background-color: #55acee;
}

.btn {
  padding: 8px 24px;
  color: white;
  display: inline-block;
  opacity: 0.8;
  border-radius: 4px;
}

.btn:hover {
  opacity: 1;
}

.fa {
  margin-right: 5px;
}

header {
  height: 65px;
  width: 100%;
  background-color: rgba(34, 49, 52, 0.9);
  position: fixed;
  top: 0;
  z-index: 10;
}

.logo {
  width: 124px;
  margin-top: 20px;
}

.header-left {
  float: left;
}

.header-right {
  float: right;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.5s;
}

.header-right:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.header-right a {
  line-height: 65px;
  padding: 0 25px;
  color: white;
  display: block;
}

.lesson-wrapper {
  height: 580px;
  background-color: #f7f7f7;
  text-align: center;
}

.heading {
  padding-top: 80px;
  padding-bottom: 50px;
  color: #5f5d60;
}

.heading h2 {
  font-weight: normal;
}

.lesson{
  float: left;
  width: 25%;
}

.lesson-icon {
  position: relative;
}

.lesson-icon p {
  position: absolute;
  top: 90px;
  width: 100%;
  color: white;
}

.text-contents {
  width: 80%;
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
  color: #b3aeb5;
}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

結局わからないままでした、

Lhankor_Mhy

2024/02/07 04:42

後の方がお手本ですか？

m044

2024/02/07 04:53

そうです！

m044

2024/02/07 04:54

class名を自分で決めてしまっているので、ややこしくなっているかもしれないです、

Lhankor_Mhy

2024/02/07 05:05

opacity をつけている場所が違うと思うのですが、この部分はお試しになりましたか？

m044

2024/02/07 05:13

私の回答で、.A .B .Cにつけているところと答えで、.btnにつけているところのことですか？

Lhankor_Mhy

2024/02/07 05:58

それではないです。回答の方で、.top p についていて、この .top はお手本だと .container です。お手本だと、.top-wrapper p についていて、この .top-wrapper は回答だと .topA です。この違いによって、.mainA 直下の .top にも影響が出ています。

m044

2024/02/07 06:17

詳しく教えていただきありがとうございます！ mainより下の方が若干色が薄いように感じていたのはそれでだったのですね。直したら無事に答え通りにすることが出来ました。ありがとうございますベストアンサーに選びたいので同じ内容を回答欄に投稿していただいてもいいでしょうか？

Lhankor_Mhy

2024/02/07 07:29

ご解決されて何よりです。お手数おかけしますが、自己解決でご対応いただけますか？ https://teratail.com/help#resolve-myself

m044

2024/02/07 09:58

わかりました本当にありがとうございました！