【CSS】CSSのレスポンシブデザインが反映されない

Question

HTMLとCSSの勉強をしているのですが、
とあるカフェのページを作りながら学んでおります。
今回、レスポンシブデザインが反映されない件について質問させていただきます。

構成は
・トップページ
┣ニュースページ
┗メニューページ

という感じで、現在メニューのレスポンシブデザインが反映されず困っております。
確認はデベロッパーツールのtoggle device toolbarを押下して
スマホサイズとPCサイズを切り替えつつかくにんしております。

ブレークポイントは600pxです。

▼下記CSSは284〜287行目あたりに記載しています。

/* モバイル版
最大の幅が600px以下の画面用
------------------------------------- */
@media (max-width: 600px) {
  /* MENU */
  .menu-content {
    margin-top: 20%;
  }
}

下記CSSは311〜314行目あたりです。

.menu-content {
    max-width: 560px;
    margin-top: 10%;
}

デベロッパーツールで確認すると、
レスポンシブの方のCSS（margin-top: 20%;）が打ち消されてしまいます。

解決方法をご教示いただけますと幸いです。

また、メディアクエリーというのは、CSSの一番最後に持ってきた方が良いのでしょうか？
（今回のCSSはstyle.cssという一つのcssに全て記載しています）
こちらもご教示いただけますと幸いです。

拙い文章で申し訳ございませんが何卒よろしくお願い申し上げます。

Answer 1

▼下記CSSは284〜287行目あたりに記載しています。

下記CSSは311〜314行目あたりです。

同じ要素に設定されたCSSは、後に記述されたものが優先されます。

311〜314行目に記述したCSSを284〜287行目より前に移動させてください。

Comments

[Baboo_12]

回答ありがとうございます。
位置を修正したら反映されました。

Answer 2

後から書いたものが勝ちます。

【メディアクエリは詳細度を変えない - Qiita】
https://qiita.com/jkr_2255/items/4f94bf872feb56bbbbf1

Comments

[Baboo_12]

回答ありがとうございます。
メディアクエリーの位置を最後に移動しました。
リンクも確認させていただきました。