Can't Apply a Style to the Header

The Prehistory Era h1{background: rgb(233, 233, 117); margin: 40px; padding: 20px;} header{ background: rgb(236, 187, 195); margin: 20px padding; 30px } section{background: rgb(204, 155, 50); opacity: .8; margin: 20px; padding: 30px;} footer{margin: 30px; padding: 50px;}

The Dawn of Man

The Neanderthals Geographical Distribution Era of Dominance Footer

So what gives here? I can apply a style to all the elements - h1, section, footer - but not to the header - how come ? Changing margin / padding values has no effect on the display.

<!DOCTYPE html>
<html>
<head>
   <title>The Prehistory Era</title>
   <style>
       h1{background: rgb(233, 233, 117);
       margin: 40px;
       padding: 20px;}
       header{
           background: rgb(236, 187, 195);
           margin: 20px
           padding; 30px
       }
       section{background: rgb(204, 155, 50);
       opacity: .8;
       margin: 20px;
       padding: 30px;}
       footer{margin: 30px;
       padding: 50px;}
   </style>
</head>
<body>
    <h1>The Dawn of Man</h1>
<header>The Neanderthals</header>   
<section>Geographical Distribution</section>
<section>Era of Dominance</section>
<footer>Footer</footer>
</body>
</html>

Try setting display: block; to the header style rule. Does that fix it?

header{
background: rgb(236, 187, 195);
margin: 20px
padding; 30px
}

   // Hi Kirupa - thanks for your response - display: block; - did not make 
   a difference but as I looked closely at your suggestion, I realized
   that I had a ; following padding instead of the required :  -  and in the 
   margin line, I forgot the ; at the end of the line  -  I didn't see
   any of this the first time I wrote the code and it took your
   suggestion to spark me into awareness of the errors. Thanks!
1 Like