Что из этого "прямоугольник?". Белый? Черный? Бело-черный?
На скрине не видно, что выше и ниже. Т.е. не сделать вывод с чего-то это дизайнер решил так рисовать. А от этого зависит выбор решения.
Но вот несколько вариантов:
Градиенты.
Псевдоэлементы (и к ним, вероятно, грид).
Просто грид.
Отрицательные margin.
Позиционирование (несколько вариантов)
С такими стилями картинка никуда не уезжает. Она остается прибита к своему relative в фиксированных координатах.
Возможно, двигается relative или изменяет размеры-пропорции.
Но 354 и 169 вообще выглядят довольно подозрительно.
Чтобы получить помощь, нужно:
1. Сделать песочницу на codepen.io или jsfiddle.net или аналоге, чтобы было видно проблему.
2. Описать, а как должно быть.
Чтобы решить проблему самостоятельно:
1. Почитать про calc
2. Про относительные единицы измерения. Для начала, скорее всего, % и vw с vh. Но лучше про все.
podushka, знаете, гораздо логичнее задавать именно тот вопрос, в котором проблема, а не неверные выводы из него.
Вероятно, вы забыли про flex-shrink и сделать доп обертку.
Но песочницу на codepen.ru (или аналоге) вы не предоставили, поэтому сложно гадать почему у вас не получилось.
1. Я не вижу тут "при адаптиве". Где @media? Ну или где адаптивные единицы измерения или clamp.
2. Если речь про отступ между лого и меню, так он не меняется, как был auto, так и остается, что на десктопе, что на мобилках. Ну либо за счет того же space-between, который тоже не менеятся.
3. Обертка navigation в виде дива вообще не нужна. А вот если поменять div на nav, то будет хорошо и логично.
4. theme-img это не img, это украшение ссылки - убираем в стили (удобно делать псевдоэлементом), вместо неё пишем текст и доступно скрываем его (гуглите visually-hidden)
То я хотел поставить картинку theme-img по центру вместе с nav-links
Достаточно было display:block. Вам мешал "пробел" после инлайновых элементов (гуглится)
Флексы выравнивают содержимое.
И как это мешает градиенту на фоне?
Если не нужна для единственной строки, то сделать градиент чуть ниже высоты блока (т.е. оставить блок без паддингов)
Сделайте песочницу с видимой проблемой на codepen.io
Пока делаете, возможно, разберетесь в чем дело.
Также можно почитать про z-index и контекст наложения, дело, скорее всего, в них.
Антон Антон, да, разумеется, для use без разницы. Суть как раз в расширении спектра использования.
В большинстве случаев это дает возможность убрать мусор из разметки.
Про сборщики не поняла мысли. Что для стеков их меньше? Ну и ладно, достаточно одного рабочего.