CSSのブレイクポイントが指定した値以上の時に処理が走るのはなぜでしょうか

Question

cssでブレイクポイントを決めて実装している最中なのですが、
1126px以上の場所でメディアクエリの処理が走ってしまいます。

他にブレイクポイントは取っていないので、謎の挙動をしてしまい困っています。

どなたかご教授お願いいたします。

追記で、どの値でメディアクエリを決めてもそれ以上の値で処理が走ってしまっています。

@media screen and (max-width:1126px) {
  .musicContent .musicInfo {
    padding-left: calc((100vw - 88%) / 2);
  }
}

Answer 1

以下の HTML に質問者さんの CSS を適用しましたが、質問文に書かれているような動作は見られませんでした(動作確認用リンク)。

<div class="musicContent">
  <div class="musicInfo"></div>
</div>

一度、以下の 2 つを確認してみてください。

• 他の CSS が装飾を行っていないか
• キャッシュが効いていないか

Comments

[hsd]

回答ありがとうございます。
提示していただいた確認した後、再起動してはみたものの、やっぱり動作は変わりません。
ただ、規則性がありまして
@media screen and (max-width:500px)と指定するとウインドウが551pxでメディアクエリの処理が走る
@media screen and (max-width:600px)と指定するとウインドウが661pxでメディアクエリの処理が走る
@media screen and (max-width:700px)と指定するとウインドウが771pxでメディアクエリの処理が走る
という感じで謎の挙動をします。
悩ましいです。

[s8_chu]

質問文にあるコード以外には何も CSS や JavaScript を記述していませんか？
また、回答文の動作確認用ページでは、正常に CSS が動作していますか？

[hsd]

srcというディレクトリにindex.htmlとcssファイルの2つしか入れておらず、特に余計なcssやjsの記述などもしていません。
しかし、s8_chuさんが確認していただいたように、他のpcで確認するとその現象が改善されるので、
余計分からなくなってしまっています。

[s8_chu]

もし、ブラウザを変更したときにそのような現象が改善するのであれば、気づかないうちにブラウザの拡大率を設定してしまっているということはありませんか？

[s8_chu]

解決方法は果たして拡大率だったのか...。

[hsd]

お手数をおかけして申し訳ございませんでした。。