メディアクエリでスマホサイズのCSSを記載するもPCサイズで記載した内容しか適用されないです

Question

メディアクエリでスマホサイズのCSSを適用できるようにしたい

前提

HTML/CSSでポートフォリオを作成しています。
レスポンシブ対応するためメディアクエリでスマホサイズのCSSを記載しており、メディアクエリは読み込み済みのstyle.cssシートに記載してます。
デベロッパーツールで検証してもPCサイズが適用されたままでスマホサイズのメディアクエリで記載したCSSが取り消し線で表示されてました。
下記の画像はクラス.header-titleで記載したフォントサイズをPC版とスマホ版で異なるように記載したつもりのものです。

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

エラーメッセージ

### 該当のソースコード

// HTML
<header>
    <div class="header">
      <div class="header-logo">
        <img class="header-img" src="./image/usagi.png" alt="logo-image">
        <a href="#"><h1 class="header-title">My Portfolio</h1></a>
      </div>
    </div>
...etc
</header>

//CSS
//PC
header {
  width: 100%;
  height: 90px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .header-logo {
    display: flex;
    align-items: center;
    margin-left: 10px;
    .header-img {
      width: 55px;
      height: 55px;
      margin-left: 2px;
      border: 2px solid #000;
      border-radius: 50%;
    }
    .header-title {
      margin-left: 10px;
      margin-bottom: 2px;
      font-size: 50px;
    }
... 

//smartpohone
@media (max-width: 599px) {
  header {
    width: 93%;
    height: 60px;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    .header-title {
      font-size: 22px;
    }
  }
}


### 試したこと
メディアクエリが効かないときに確認することなどググって以下を確認・対応済みの状態です。
①{}の抜け落ちがないか？
→確認済み、抜け落ちがあるとエラーが出ますが現状そのようなエラーは無し

②viewportの記述はあるかどうか
→  <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, minimum-scale=1.0">と記入してます

③HTML側で読み込まれていない
→試しにメディアクエリ内にbodyのbackground-colorに対して色を当てたところ、それは反映されました。

### 補足情報（FW/ツールのバージョンなど）

Answer 1

CSSの優先順位は「詳細度」と「書いた順序」で決まりますが、メディアクエリは詳細度に影響しません（Qiita）。

header .header-logo .header-titleはクラス2つタグ1つなので、クラス1つタグ1つのheader .header-titleより詳細度が高く、優先して適用されます。

Comments

[Pommes]

早速ご回答いただきありがとうございます。
CSSは下に記載したものが優先になるものだと思ってました。
今回のつまづきで詳細度について理解が足りていないことを発見できてよかったです。
また、簡潔にわかりやすい回答をありがとうございました。
詳細度を変えて記載したところ、無事に意図したCSSが反映されました！