Margin not transparent

I have a header. Inside I have another <div> with a repeating background image. I want 60px of margin on the top and bottom to reveal a solid background color set in <header>, however, it’s not showing the background color #2f2f2f it’s white. What am I missing?


  <div class="header">
    <h1>Stuff here</h1>


  background-color: #2f2f2f;
  width: auto;
  height: auto;
  background: #2f2f2f url("../images/tweed.png") repeat left top;
  margin: 60px 0;


You are observing collapsing margins:

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

One solution would be to set an overflow other than visible on the parent element. In this case:

Example Here

header {
  background-color: #2f2f2f;
  width: auto;
  height: auto;
  overflow: auto;

Take a look at this older answer of mine for a longer explanation with more workarounds.