レスポンシブデザインscssのdisplayプロパティー

前提・実現したいこと

display: none;で消した要素を、display:inline-block; display: block;で再表示させる。

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

PC-firstで、サイトを作っています。
PC用の画面で消した要素を、タブレット用の画面で、レスポンシブデザインで、再表示させようと、display:inline-block; display: block;を指定しても、再表示されません。

### 該当のソースコード
/*PC*/
.menu-icon {display: none;}
.menu-bar {display: none;}

/*Tablet*/
@media (max-width: 991px) {
.menu-icon {
        text-align: center;
        width: 116px;
        background: #3B4652;
        font-size: 32px;
        line-height: 92px;
        cursor: pointer;
        margin-right: 26px;
        display: inline-block;  
      }
      .menu-bar {
        width: 153px;
        height: 160px;
        background: #3B4652;
        position: absolute;
        left: 0;
        width: 100%;
        h2 {margin: {top:38px; bottom: 31px; left: 33px;}}
        a:first-of-type {margin-left: 47px;}
        a:last-of-type {margin: {left: 22.22%; right: 20.5%;}}
        display: block;
      }

}
```ここに言語名を入力
scss

### 試したこと
tabletのコードは、@importを、使い別ファイルで、管理しています。
display:none;をコメントアウトし、menu-iconとmenu-barの、backgroundのカラーを変えてみたりしましたが、正常に色が変わりました。しかし、display:balok;などが、なぜか効きません。
詳細度も、クラス同士で、同じはずなのに、なぜ上書きされないのでしょうか？