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

Is this hat:
818fd32eb34e44ceb0f43028c3ae0b0b.PNG
I want to shift the menu below 20 pixels. But it moves with a unit cap.
dc708125ac734c47acdcfbeb6be7c217.PNG
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);
 }
July 9th 19 at 10:40
2 answers
July 9th 19 at 10:42
Solution
.header { overflow: hidden; }
July 9th 19 at 10:44
Try the header to set the padding-top
https://jsfiddle.net/56uhk6mo/

Find more questions by tags CSSHTML