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

Question

[emiliooaaugust]

Хочу создать такой адаптив
из этого
Но когда пытаюсь поменять 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;
}

Comments

[Александр Васильев]

Медиа запросы? Гугл?

[Сергей delphinpro]

Александр Васильев, да какие нафиг медизапросы. у чела стиль

img {
display: flex;
align-items: center;
}

Что он этим хотел добиться?

Тут на лицо полное незнание CSS. В ответ можно только полностью за него решить проблему. Помогать нечему.

[emiliooaaugust]

Сергей delphinpro, я нашёл проблему по поводу адаптива.
А по поводу этого кода:

img {
display: flex;
align-items: center;
}

То я хотел поставить картинку theme-img по центру вместе с nav-links, т.к. когда я ставил без этого, то img улетела немножко вверх, то есть была не по центру с nav-links. Я просто только начал изучать HTMLи CSS, и был бы рад узнать, что можно здесь поменять и сделать по-другому?

[Ankhena]

1. Я не вижу тут "при адаптиве". Где @media? Ну или где адаптивные единицы измерения или clamp.
2. Если речь про отступ между лого и меню, так он не меняется, как был auto, так и остается, что на десктопе, что на мобилках. Ну либо за счет того же space-between, который тоже не менеятся.
3. Обертка navigation в виде дива вообще не нужна. А вот если поменять div на nav, то будет хорошо и логично.
4. theme-img это не img, это украшение ссылки - убираем в стили (удобно делать псевдоэлементом), вместо неё пишем текст и доступно скрываем его (гуглите visually-hidden)

То я хотел поставить картинку theme-img по центру вместе с nav-links

Достаточно было display:block. Вам мешал "пробел" после инлайновых элементов (гуглится)
Флексы выравнивают содержимое.