私はサイトをデザインしていますが、フロート<div>要素を完全に合わせるのに少し苦労しています。問題を説明するために多くの不要なコードを削除し、以下のフィドルに入れました。
ご覧のとおり、私の最善の努力にもかかわらず、右側のエッジは均一ではありません。<div>.css を読むと、navと containerの幅を決定するために私が行ったことがわかります<div>。
#nav {
width: calc(10% - 14px);
} /* 14px comes from two 2px border walls + 10px left-padding */
#container {
width: calc(90% - 22px);
} /* 22px comes from one 2px border wall + 10px right- and left-padding */
インデントの幅は 6 ピクセルで、これは私の .css には何もありません。(10% - 14px) + (90% - 22px) + ボーダーの 6px + パディングの 30px は 100% の幅に等しいはずですが、94% しかありません。幅を何に変更しても (コンテナの<div>幅をに変更しcalc(90% - 16px)ても、同じ 6 ピクセルのギャップが得られます。