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>
 <div class="name">
 <h1>Ruslan Magomedov</h1>

 background: #D2CDE7;

 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);
July 9th 19 at 10:40
2 answers
July 9th 19 at 10:42
.header { overflow: hidden; }
July 9th 19 at 10:44
Try the header to set the padding-top

Find more questions by tags CSSHTML