Меню смещается вместе с шапкой, что я делаю не так?

Question

[Руслан Магомедов]

Есть вот такая шапка:

Я хочу сместить меню ниже на 20 пикселей. Но оно смещает вместе с собой блок шапки.

Как сделать так, чтобы меню сместилось, а шапка осталась на месте?

<div class="header">
            <div class="menu">
                <ul>
                    <li><a href="#">Общие сведения</a></li>
                    <li><a href="#">Навыки</a></li>
                    <li><a href="#">Опыт работы</a></li>
                    <li><a href="#">Портфолио</a></li>
                    <li><a href="#">Преимущества</a></li>
                    <li><a href="#">Пожелания</a></li>
                    <li><a href="#">Контакты</a></li>
                </ul>
            </div>
        <div class="name">
            <h1>Магомедов Руслан</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);
    }

Comments

[Руслан Магомедов]

спасибо огромное

Answer 1

[Faber Estello]

.header { overflow: hidden; }

Answer 2

[Mary Солнечная]

Попробуйте у cамого header задать padding-top
https://jsfiddle.net/56uhk6mo/