Верхний отступ блока CSS

Question

Почему отступ происходит не от блока header?

КОД

body {}

#wrapper {
  width: 1200px;
  height: auto;
  margin: 0 auto;
}

#header {
  width: 1200px;
  height: 500px;
  background-color: #E74C3C;
  background-image: url(../img/header_bg.jpg);
  opacity: 0.7;
}

#nav {
  outline: 1px solid #cccccc;
  width: 960px;
  height: 20px;
  margin: 60px auto;
}

<div id="wrapper">
  <div id="header">
    <div id="nav">
    </div>
  </div>
</div>

Answer 1

Все дело в "схлопывании"

http://xiper.net/learn/css/box-model/margin-collapsing http://www.xiper.net/collect/html-and-css-tricks/pozitsionirovanie/margin-collapsing-trick

Answer 2

#header {

    width: 1200px;
    height: 500px;
    background-color: #E74C3C;
    background-image: url(../img/header_bg.jpg);
    opacity: 0.7;
    position: relative;
    overflow: hidden;

}

Поможет иправить ситуацию.