レスポンシブでスマホのみ改行の設定をしたはずが適用されずPCでも改行されてしまいます。

Question

前提・実現したいこと

HTMLとCSSでPCサイトファーストでレスポンシブサイトを制作。

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

改行をスマホ版のみ適用とPC版のみ適用で設定したいのですが、
PCの時のみ改行適用は問題なく表示されるのですが
スマホの時のみの改行が適用されません。
（PCで見たときにスマホのみの改行のはずが改行されている）
コードチェッカーでチェックはしたのですがなぜでしょうか？

該当のソースコード

@media screen and (max-width: 540px) {
    .br-pc {
      display: none;
    }

    .br-sp {
      display: inline;
    }
  }

  @media screen and (min-width: 540px) {
    .br-pc {
      display: inline;
    }

    .br-sp {
      display: none;
    }
  }

  <div class="inner_box02">
                <h3 class="h3_reason">2.あいうえお<br class="br-sp">かきくけこ</h3>

### 試したこと

HTMLコードをチェッカーにかけた。

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

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

viewport の設定をご提示いただけますか？

[退会済みユーザー]

<meta name="viewport" content="width=device-width,initial-scale=1" />
になります。

[Lhankor_Mhy]

ご提示のコードを試してみました問題が再現しませんでした。
ご提示いただいていない部分に原因があると思われます。

Answer 1

max-width: 540pxでの指定をmin-width: 540pxで上書きしているので
スマホの表示確認を540pxのデバイスで行っているならPC用の改行が適用されます。

@media screen and (max-width: 540px) {
}
@media screen and (min-width: 541px) {
}