Как сделать логотип, выходящий за пределы header на половину?

Question

[eweretti]

Добрый день!

Подскажите пожалуйста, куда глядеть, чтобы сверстать так, как на макете?
Логотип наполовину должен находиться в хэдере, и наполовину выходить за его пределы вниз.

Должно быть так:


У меня так:


Вот код:

<header class="header">
        <div class="container">
            <nav class="nav">
                <ul class="menu-left">
                    <li class="menu-item">
                        <a class="menu-link" href="#">Услуги и цены</a>
                    </li>
                    <li class="menu-item">
                        <a class="menu-link" href="#">Мои работы</a>
                    </li>
                    <li class="menu-item">
                        <a class="menu-link" href="#">Отзывы</a>
                    </li>
                    <li class="menu-item">
                        <img class="vk-logo-img" src="images/vk.png" alt="Логотип ВК">
                    </li>
                </ul>
                <a class="logo">
                    <img class="logo-img" src="images/logo.png" alt="Логотип">
                </a>
                <ul class="menu-right">
                    <li class="menu-item">
                        <a class="menu-item" href="#">Контакты</a>
                    </li>
                    <li class="menu-item">
                        <a class="phone" href="tel:777">+777</a>
                    </li>
                    <li class="menu-item">
                        <a class="enroll-button" href="#">Записаться онлайн</a>
                    </li>
                </ul>

            </nav>
        </div>
    </header>

.header{
    background-color: rgba(0, 0, 0, 0.2);
}

.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

body{
   background-color: #232323;
}

.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-left, .menu-right{
    display: flex;
}

.logo{

}

Comments

[mletov]

Почитайте про position: absolute

[Ankhena]

Задайте отрицательный margin на половину логотипа.
Не нужен там абсолют.

[eweretti]

Ankhena, спасибо, это гениально)
Сделала то же самое, только в процентах с абсолютом, но при свертывании все ехало)
А ваш вариант тот, что нужен был <3