アマゾン商品プレビューでナビゲーションバーの乱れる理由

WordPressでサイトの構築を完了したあと、amazonの商品プレビュー用のjavaスクリプトを設置したらナビゲーションバーの表示が乱れた。cssで設定した幅よりも少し広がってしまうのだ。

なぜ乱れるのか検索してもこの症状について書いてあるページがないのでしばらく使用しないでいたけれど、先ほどなおすことができたのでここに書いておきます。

理由：
htmlのnavタグのidの名前をnavbarにしていたから。

つまり、

<nav id="navbar">

としてサイトを作るとamazon商品プレビュー用のjavaスクリプト側でnavbarのcssによる設定を上書きしてしまうからだった。
しかたがないのでnavbarという名前をやめてglobalnavとしました。

<nav id="globalnav">

たぶんクラス名とかID名がかぶってるのではないかなぁとは薄々思ってはいました。まさかアマゾンさんがそんなことしないだろうと思っていたし。で、ブラウザのchromeに標準にある機能「要素を検証」で調べていってわかりました。やっぱりそうなのかというがっかり感。

ちなみになぜnavbarにしていたかというとWordPressの本に書いてあった例をそのまま採用したから。でもこれ高い確率で使われる名称だと思うんですよね。
あとからやってきたamazonのjavaスクリプトになんか負けた気がしてしまうのでした。