Margin not working with float elements

Margin not working with float elements

On my web page, I have a logo and a menu that make up header elements and
a hero unit under it. Now I want to give it some bottom margin so there is
enough negative space between header and hero unit but this bottom margin
(100px) is not applying. Same thing if I try to give top margin from hero
unit.
.header {
width: 95%;
margin: 20px auto 100px;
}
Here is my working sample JS BIN