cssコードが正しく動作していません

Question

これは自分自身からCSSファイルを作成するのは初めてです。

すべてうまくいきますが、メニュー/コンテンツの幅に問題があります。 画面全体を埋めるためにパーセンテージで作業しています。空白が残っています。ブラウザの幅を調整すると、完全に壊れています（メニュー/コンテンツ）。

コード：

header { 
background-color: black; 
color: white; 
text-align: center; 
width: 100%; 
height: 20%; 
margin: 0px; 
padding: 10px; 
} 

menu { 
background-color: gray; 
color: white; 
height: 60%; 
width: 10%; 
float: left; 
margin: 0px; 
padding: 10px; 
} 

content { 
background-color: blue; 
float: left; 
color: white; 
width: 87%; 
height: 60%; 
margin: 0px; 
padding: 10px; 
} 

footer { 
clear: both; 
background-color: black; 
color: white; 
width: 100%; 
height: 20%; 
margin: 0px; 
padding: 10px; 
} 

これは私のテストのURLです：私は、これはあなたが目指しているものだと思いますTesting url

Answer 1

。

body { 
    margin:0; 
} 

header { 
    background-color: black; 
    color: white; 
    text-align: center; 
    width: 100%; 
    height: 20%; 
    margin: 0px; 
} 

menu { 
    background-color: gray; 
    color: white; 
    height: 60%; 
    width: 10%; 
    float: left; 
    margin: 0px; 
    -webkit-padding-start: 0px; 
} 

content { 
    background-color: blue; 
    float: left; 
    color: white; 
    width: 90%; 
    height: 60%; 
    margin: 0px; 
} 

footer { 
    clear: both; 
    background-color: black; 
    color: white; 
    width: 100%; 
    height: 20%; 
    margin: 0px; 
}