書いたタグがブラウザ上で表示されない。

Question

前提・実現したいこと

isaraの模写を行っております。articleタグでwhatisクラスを作ったのですが、
グーグルクロムの検証を用いても書いたタグが存在していないようで表示されておらず、実際にwhatisクラスにpaddingやbackground-colorを書いてもなにも変化がありませんでした。
なにが原因でしょうか？？よろしくお願いいたします。

該当のソースコード

    <article　class="whatis">
        <p class="circle-about">ABOUT</p>
        <h2 class="key-brackets">ノマドエンジニア育成講座<br>
            iSara[イサラ]とは</h2>
        <p class="whatis-isara"> 「稼ぐこと」にフォーカスしたWebエンジニア育成講座です。</p>
        <div class="whatis-surround">
            <p class="whatis-isara">稼げるエンジニアに必要な５つのスキルとは？</p>
            <div class="whatis-detail">
                <div class="whatis-block">
                    <img src="../img/skill.jpg" alt="">
                    <p>基礎的な<br>
                        プログラミングスキル</p>
                </div>
                <div class="whatis-block">
                    <img src="../img/sales.jpg" alt="">
                    <p>案件獲得に必要な<br>
                        営業力</p>
                </div>
                <div class="whatis-block">
                    <img src="../img/document.jpg" alt="">
                    <p>見積もり作成から<br>
                        納品までの知識</p>
                </div>
                <div class="whatis-block">
                    <img src="../img/plusone.jpg" alt="">
                    <p>自分の付加価値を<br>
                        高めるスキル</p>
                </div>
                <div class="whatis-block">
                    <img src="../img/connection.jpg" alt="">
                    <p>フリーランス同士の<br>
                        横のつながり</p>
                </div>
            </div>
        </div>
    </article>

.key-brackets{
   padding:5rem 0;
   text-align: center;
   position:relative;
   font-size:1.4rem;
}

.key-brackets:before {
    position:absolute;

    content:"";
    box-sizing: border-box;

    top: 3rem;
    left: 4rem;

    width: 50px;
    height: 50px;

    border-top: 4px solid #ebb94d;
    border-left: 4px solid #ebb94d;
}

.key-brackets:after {
    position: absolute;
    content: "";
    box-sizing: border-box;

    bottom: 3rem;
    right: 4rem;
   
    width: 50px;
    height: 50px;

    border-bottom: 4px solid #ebb94d;
    border-right: 4px solid #ebb94d;
}


.circle-about{   
        position:relative;
        bottom:3rem;
        font-size:1rem;
        color:white;
        width:5rem;
        height: 5rem;
        border-radius: 50%;
        background:orange;
        text-align:center;
        line-height: 5rem;
        margin-left:46%;
      }

.whatis-isara{
        text-align:center;
        font-size:1.2rem;
        font-weight:bold;
    }

.whatis-surround{
        margin:2rem 2rem 0;
        padding:2rem 0;
        border-width:0.2rem;
        border-color:orange;
        border-style: solid;	
    }
    
.whatis-detail{
        display:flex;
        justify-content:center;
    }
    
.whatis-block{
        margin-top:2rem;
        padding:1rem 0.5rem;
    }
    
.whatis-block p{
        font-size:0.7rem;
        text-align:center;
        padding-top:1rem;
        line-height:0.8rem;
    }
    
.whatis-block img{
        padding:0 1.5rem;
    }

.whatis{
        padding:1rem 0;
        background-color: #ebb94d;
    }

Answer 1

<article　class="whatis">
        ↑
ここの全角空白を半角空白に修正すればいいでしょう。

Comments

[sharara]

見逃してしまっていました・・・。ありがとうございます！