2つのdivのCSSプロパティ - 一致する幅が期待通りでない

Question

タイトルバーの下にコンテンツのdivがあり、幅が一致すると予想されます。コンテンツのdivが、しかし、左に非常にわずかにオフセットしているように見えるだけでなく、この画像では右側に証明されたようにわずかに狭いもの：

タイトルdiv要素も少しダイナミックを持っていますJSはそれをページの上部に「スティック」させるため、CSSの「スティック」部分も含まれます。

タイトルのdiv

#menu { 
    margin-top: 10px; 
    padding: 0.5ex; 
    width: 100%; 
    background-color: #0B0000; 
    color: #ffffff; 
    height: 16px; 
} 
#menu.stick { 
    margin-top: 0 !important; 
    position: sticky; 
    top: 0; 
    z-index: 10000; 
} 

ルート背景

#bodystyle { 
    background-color: #efefef; 
    color: #333; 
    font-size: .85em; 
    font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; 
    margin: 0; 
    padding-left: 20px; 
    padding-right: 20px; 
} 

ページのコンテンツ

#pagecontent { 
    /*width: 100%;*/ <=== This being set does not remedy the problem. 
    padding-left: 7%;  Instead the div expands to the right hand 
    padding-right: 7%; edge of the page. 
    padding-top: 3%; 
    background-color: #ffffff !important; 
} 

でしエッジテキストパディングの影響を受ける可能性がありますか？私は自分自身ではないと思ったでしょう。あるいは、これは期待される行動ですか？理想的には、タイトルとコンテンツの両方のdivが完全に均一であることが望ましいと思います。

Answer 1

ここに回答してください。

それでは、あなたがやりたいことはすべてalementsにあるボックスのサイズ変更を追加します：

*, *:before, *:after { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

これはちょうどあなたのCSSのリセット後に行くことができます。このようにして、要素の幅を設定すると、その幅がその幅内に現れます。

次に、高さについては、2つのオプション、その高さの固定高さ、またはパディングを追加するオプションがあります。私は固定された高さで移動し、同じ高さに行の高さを追加してテキストを中央に配置します。

それはそれです。