Element should not move the whole container when using margin

Question

I have the following CSS with HTML:

body {
  margin: 0;
}

header {
  background: #ccc;
  width: 80%;
  margin: 0 auto;
}

header .header-container {
  padding: 20px;
}

header ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

header li {
  display: inline;
  padding: 0 15px;
}

.mainbox {
  background: #eee;
  width: 80%;
  margin: 0 auto;
  height: 700px;
}

.childbox {
  background: #ddd;
  height: 100%;
  width: 90%;
  margin: 0 auto;
}

.childbox h1 {
  margin: 10px;
}

<header>
  <div class="header-container">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Product</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</header>
<div class="mainbox">
  <div class="childbox">
    <h1>Hello World</h1>
  </div>
</div>

Now the problem is that the h1 element pushed it's container down because it has a margin. How can I apply this margin within the container only, so that it does not move the whole container down?