SCSSの@mediaで記述したプロパティが反映されない。

Question

模写コーディングを行っています。

画面幅を狭くした際に、日付とタイトルと段落との空白をなくしたいです。

【HTML】
<article class="article"> <div class="article-left"> <a href="#">2018年9月1日</a> </div> <div class="article-right"> <h2> <a href="#">書くためのテーマ</a> </h2> <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p> </div>
【SCSS】
.article{ display: flex; flex-wrap: wrap; @media screen and (max-width: 979px){ flex-direction:column; &-left{ width: 100%; height: auto; } } &-left{ height:200px; width: 30%; a{ color:$txt-color1; font-size:17px; display: block; } }
画面幅が979px以下の時に、article-leftのheightをautoに指定したのですが、
既存で設定したheight200pxが当たってしまっています。

ディベロッパーツールで確認しても、

height:autoが打ち消されて200pxが当たっています。

読み込む順番を変えてみたのですが結果は同じです。

ご回答いただけますと幸いです。

Answer 1

読み込む順番が原因でした。
ブラウザの更新を忘れいただけでした。
申しわけありません。