HTML/CSSでの「font-weight」タグについて…。ProgateのHTML/CSS道場コース中級編

前提・実現したいこと

ProgateのHTML/CSS道場コース中級編をやっています。
今までに、いろいろググって解決して来たのですがどうしてもどう解決すればいいのかわからないため質問させていただきました。

発生している問題・エラーメッセージ

・font-weightが「bold」にも「nomal」にもならない。適用されません。
・{lesson-icon}クラス（六角形の画像）の下の{txt-contents}クラス（説明してる文章）のRubyとPHPの文字のサイズ（検証ツールを使ってフォントサイズは同じにしました。）が見本とちがうため、判定ではNGを食らったのですがHTML＆CSSとjQueryの説明はサイズが全く一緒なので困っています。

該当のソースコード

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Progate</title>
  <link rel="stylesheet" href="stylesheet.css">
  <!-- ここでFont Awesomeを読み込んでください -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
</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 class="login" href="#">ログイン</a>
       </div>
     </div>
  </header>
   
   <div class="top-wrapper">
     <div class="container">
        <h1>LEARN TO CODE.</h1>
        <h1>LEARN TO BE CREATIVE.</h1>
        <p>Progateはオンラインプログラミング学習サービスです。</p>
        <p>初心者にも優しいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
     </div>
        <!--<a href="">新規登録はこちら</a>-->
        <!--<a href="">Facebookで登録</a>-->
        <!--<a href="">Twitterで登録</a>-->
     <div class="btn-wrappaer">
       <a class="btn Signup">新規登録はこちら</a> 
        <p>or</p>
        <a class="btn Facebook"><i class="fab fa-facebook-f"></i>Facebookで登録</a>
        <a class="btn Twitter"><i class="fab fa-twitter"></i>Twitterで登録</a>
     </div>
   </div>
  
   <div class="lesson-wrapper">
     <div class="container">
       <div class="heading">
        <h2>Leaern 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ライブラリです。アニメーション効果をつけたり、AjacX(エイジャックス)を使って外部ファイルを読み込んだり色々なことができます。</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アプリケーションから大きな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>
   
   <div class="message-wrapper">
     
   </div>
   <footer>
     
   </footer>
</body>
</html>

CSS

/* CSSのリセット（消さないでください） */
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;
}

header {
  height: 65px;
  background-color: rgba(34, 49, 52, 0.9);
  position: fixed;
  top: 0;
  right:0;
  left: 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);

}

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

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

.top-wrapper {
  background-image: url(https://prog-8.com/images/html/advanced/top.png);
  background-size: cover;
  padding-top: 180px;
  padding-bottom: 100px;
  color: white;
  margin: 0 auto;
  text-align: center;
}

.container {
  width: 1170px;
  margin: 0 auto;
  /*opacity: 0.7;*/
}

.container p {
  opacity: 0.7;
}

h1 {
  font-size: 45px;
  /*font-weight: bold;*/
  letter-spacing: 5px;
  color: white;
  opacity: 0.7;
}


.btn-wrappaer p{
  
   padding: 15px 0;
}
.btn {
  display: inline-block;
  padding: 8px 24px;
  opacity: 0.8;
  border-radius: 4px;
}

.Signup {
  margin-top: 30px;
  background-color: #239b76;
}

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

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

a:hover {
  opacity: 1;
  cursor: pointer;
}

.lesson-wrapper {
  height: 500px;
  padding-bottom: 80px;
  background-color: #f7f7f7;
  text-align: center;
}

.heading {
  padding: 80px 0 30px;
}

.heading h2 {
  font-weight: normal;
  text-align: center;
}

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

.lesson-icon {
  position: relative;
  padding-top: 20px;
  
}

.lesson-icon p {
  position: absolute;
  top: 110px;
  width: 100%;
  color: white;
  font-weight: bold;
}

p {
  font-weight: bold;
}

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

Yorrie

2020/05/14 08:47

・文字がまったく太字にならない　→具体的にどこを太字にしたいですか？・{contents-icon}クラスの下の{text-contents}クラスのサイズがおかしい。　→.contents-iconが見当たりませんが、.lesson-icon > .text-contentsのことでいいですか？　　「サイズがおかしい」とは具体的にどこがおかしくて、現状からどうなるように修正したいですか？

yk.m.0509

2020/05/14 09:05

返信ありがとうございます。すみません。質問する時のマナーがなってませんでした…。言葉足らず＆質問内容をちゃんと確認せず発信してしまい申し訳ありません。内容を更新したのでもしお時間があればもう一回診ていただいてもよろしいでしょうか…。

kei344

2020/05/14 09:23

https://jsfiddle.net/0fxyod13/ 六角形の箇所もその下の文章もboldになっていますよ。

yk.m.0509

2020/05/16 06:58

ありがとうございます。見本と色が違うので…。ですが、今日改めて確認したところ「Ruby」の文章が間違えていて、それが判定NGの原因だったようです。文を訂正したところ、先に進むことができました。　次質問するときはもっと自分が何を聞きたいのかを明確にしたいと思います。本当にありがとうございました。

kei344

2020/05/16 07:49

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

yk.m.0509

2020/05/17 07:01

すみません。初めてな物で…そういう機能があるのですね！教えてくださりありがとうございます。

kei344

2020/05/17 07:02

【ヘルプ｜teratail（テラテイル）】 https://teratail.com/help#resolve-myself > 質問をした後に自己解決してしまった > 自分で投稿した質問にも回答する事が可能です。質問文の内容を編集したりせず、回答を付けベストアンサーをクリックし解決済みにしてください。

yk.m.0509

2020/05/17 07:11

やり方はこれで合っているでしょうか。ちなみに、他の人の返答をベストアンサーにするには、他の人が追記依頼などではなくて回答をしてくれたときにすることができるのですか？

kei344

2020/05/17 07:16

対応ありがとうございます。 > 回答をしてくれたときにすることができるのですか？はい。

yk.m.0509

2020/05/17 07:17

色々教えてくださり、ありがとうございました！！