display:none;で要素が消えません。。

Question

デフォルトでは、画像を消しておいて767px以下の時にその画像を表示したいのですが

デフォルト時にdisplay:none;を指定しても要素が消えてくれません。。

どなたかわかる方いればご教授頂けると助かります。

よろしくお願いします????‍♂️

具体的には、main-aの767px以下の時は消えるのですが、main-bの画像がデフォルト時に消えてくれないです。

<div class="main">
        <div class="main-a">
          <img src="img" alt="画像">
        </div>
        <div　class="main-b">
          <img src="img" alt="画像">
        </div>
      </div>

 .main{
        width: 100%;
        height: auto;
        padding: 2% 0 3%;
        text-align: center;
        .main-a{
            margin: 0 auto;
            width: 61.2%;
            height: auto;
            @media screen and (max-width:767px){
                display: none;
            }
            img{
                max-width: 100%;
                height: auto;
                @media screen and (max-width:767px){
                    display: none;
                }
            }
        }
        .main-b{
            display: none;
            width: 94.4%;
            margin: 0 auto;
            height: auto;
            @media screen and (max-width:767px){
                display: block;
            }
            img{
                display: none;
                max-width: 100%;
                height: auto;
                @media screen and (max-width:767px){
                    display: block;
                }
            }
        }
    }

Answer 1

<div　class="main-b">
    ^ここ

全角スペースなのが原因です。

Comments

[blueee]

解決しました！
全角だと反映されないのも初知りだったので、勉強にもなりました。
本当に助かりました、ありがとうございます????‍♂️

Answer 2

ふつうのCSSはネストできません。Sassなど専用の処理系が必要となります。

Comments

[blueee]

すいません、付け加えとけば良かったのですが、sassをインストールしてコンパイル済みです。