CSSが適用されない不整合


movabletypeで作っているサイトで、ナビゲーター部分に色を付けようと思い、
今あるCSSにオーバーライドするようなものをコピペ。

そしたら全く効きません。デベロッパーツールで見ても、出てこない。
なんでだろうか、と思っていて条件をよく確認したら、不整合を起こしていました。

@media (min-width: 930px) {
  [role="navigation"] ul {
    background: #666;
    width: 936px;
    padding-left: 24px;
}}


「width: 936px;」これ消したら動きました。
もとのものをあまり考えず、そのままコピペしたのが良くなかった。

また、どうももう1つ出ない原因があるなーと調査していたら、
ulの下にあるliに「 float: left;」が悪さをしているということが判明。
これもいったん外して対応してみました。

クロームのデベロッパーツール万歳。これほんと調査しやすいわ。