I'm having trouble creating a header that takes up 20% to 40% of the body. When I try using percentages, it doesn't work but it works fine with pixels. Can someone explain why percentages aren't working for this?
*{
margin:0;
padding:;
box-sizing:border-box;
}
html{
padding:3em;
}
header{
width:100%;
background:#e74c3c;
height:30%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<header>
<h1> JavaScript </h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>Gallery</li>
<li>About Us</li>
</ul>
</nav>
<div class="content">
<h1>Learn JavaScript</h1>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo laboriosam, explicabo commodi tempora maiores facere qui <BR></BR>ratione nostrum unde rem placeat, distinctio similique quod quos ullam autem molestiae? Perferendis vero hic temporibus quaerat, aut tempore ipsam expedita fuga ea cupiditate eius sit <BR></BR> unde, dolorem earum enim quos, omnis voluptates deserunt commodi rem veritatis? Quam at ipsum excepturi deserunt quae! Debitis ab fugit error dolore! Maiores sunt hic suscipit? Nihil, quis.
</div>
<aside>
<ul>
<li>Home</li>
<li>Contact</li>
<li>Gallery</li>
<li>About</li>
</ul>
</aside>
<footer>
<p class="end-text">Shayan Kanwal @ Copyright 2020</p>
</footer>
</body>
</html>