固定のhtml divsが端を越える

Question

私は基本的なhtml & cssを学ぼうとしていますが、navbarを使って簡単なウェブページを作っていましたが、ヘッダを修正するとページの右側に移動します。

<div ID="header"> 
    <table ID="navbar"> 
     <tr> 
      <td>Home</td> 
      <td>About</td> 
     </tr> 
    </table> 
</div> 


#header { 
background-color: yellow; 
position: fixed; 
height: 35px; 
width: 100%; 
border-radius: 10px; 
border: 2px solid red} 

どうすればこの問題を解決できますか？ありがとう。

Answer 1

左右のスペースを定義する必要があります。ここ

私はバイオリンを作った：https://jsfiddle.net/yq6zoyhk/

#header { 
background-color: yellow; 
box-sizing: border-box; 
position: fixed; 
top: 0; 
left: 0; 
height: 35px; 
width: 100%; 
border-radius: 10px; 
border: 2px solid red} 

Answer 2

CSSの下に追加します。

#header{ 
    box-sizing: border-box; 
    top: 0; 
    left: 0; 
} 

ボックスサイズ：ボーダーボックスは幅（100％）の境界線が含まれていることを意味します。それ以外の場合は要素の幅は100％+ 4PXだろう - それはあなたがまた、ブラウザのデフォルトのマージン&パディング設定の病気かもしれませんので、私は追加することをお勧めブラウザウィンドウ

よりも広くなっている。

html, body{ 
    margin: 0; 
    padding: 0; 
} 

cssファイルのbegginingで、あなたはまだ行っていない場合は、この

Answer 3

あなたは、あなたが左からそれをしたい場合は、左と上から間隔を定義left:0; top:0;を追加したりする必要がposition:fixedを使用しているあなたはそれを中央にしたい場合次にleft:0; right:0; top:0;

0123を追加します。

Answer 4

HTMLファイルが正しいが、CSSファイルの変化です。 CSS：CSSファイル内のコード上で

#header {background-color: yellow;position: fixed;height: 35px;width: 100%;border-radius: 10px;box-sizing: border-box;top: 0;left: 0;} 

過去。

ここでは、動作が確認できますDemo。