@emiliooaaugust

Как поменять отступы на адаптивной вёрстке?

Хочу создать такой адаптив 66608213b7549700566942.png
из этого 6660824e7946f201538275.png
Но когда пытаюсь поменять margin в адаптиве и подогнать под дизайн который на первой картинке, но оно не меняется
Вот мой код HTML/CSS:
<header class="header">
        <div class="logo">
            <img src="images/logo.svg" alt="logo">
        </div>
        <div class="navigation">
            <ul class="nav-links">
                <li><a href="#">Home</a></li>
                <li><a href="#">Celebrate</a></li>
                <li><a href="#">Gifts</a></li>
                <li><a href="#">New</a></li>
                <a href="#"><img class="theme-img" src="images/theme.svg" alt=""></a>
            </ul>
        </div>
    </header>

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

    margin: 24px 156px;

}

.nav-links {
    display: flex;
    align-items: center;
    list-style: none;
}

.nav-links li {
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.theme-img {
    display: flex;
    align-items: center;

    transition: color 0.3s ease;
}

.nav-links a {
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    color: #282525;
    margin-right: 48px;

    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #DC3845;
}
  • Вопрос задан
  • 122 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы