css 代码不能正常工作

Question

This is the first time writing a css file from myself.

Everything is working fine, but i have a problem with my menu/content width. I'm working with percentage to fill the whole screen. There is some blank space left, and when i adjust my browser width, its totally broken (menu/content).

Code:

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

This is my testing URL: Testing url

Answer 1

I think this is what you're aiming for.

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