The menu moves along with the cap, what am I doing wrong?

Is this hat:

I want to shift the menu below 20 pixels. But it moves with a unit cap.

How to make menu has shifted, and the cap remained in place?

<div class="header">
 <div class="menu">
the <ul>
 the <li><a href="#">General information</a></li>
 the <li><a href="#">Skills</a></li>
 the <li><a href="#">Experience</a></li>
 the <li><a href="#">Portfolio</a></li>
 the <li><a href="#">Benefits</a></li>
 the <li><a href="#">Wishes</a></li>
 the <li><a href="#">Contacts</a></li>
</ul>
</div>
 <div class="name">
 <h1>Ruslan Magomedov</h1>
</div>
 </div>

.header{
 background: #D2CDE7;
}

.menu{
 display: block;
 position: relative;
 z-index: 100;
 background: white;
 margin: 20px auto;
 width: 900px;
 height: 65px;
 padding-top: 15px;
 text-align: center;
 box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }