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;
}

這是我的測試網址：測試網址

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;
}