Рома Зварич

У Вас элементы являются строчно-блочными.
Margin-top увеличивает высоту родительского элемента и тянет за собой второй элемент, так как свойство vertical-align у строчно-блочных элементов middle.

Есть хорошее правило, рекомендующее при определении элементов строчно-блочными, задавать им vertical-align: top.
Примените его к обоим блокам header-logo и header-search.

Можно пойти по долгому пути с использванием псевдоэлементов, а можно в одну строку это сделать.

Результат:
https://codepen.io/hisbvdis/pen/yLBvoar

Например, вот так
https://codepen.io/hisbvdis/pen/XWrZbRe

Например, вот так

P.S. Добавьте пожалуйста к вопросу тег flexbox

https://codepen.io/hisbvdis/pen/QWLaoVx

Для head__inner укажите z-index:0;, а для head__img укажите z-index: -1;

Результат:
https://codepen.io/hisbvdis/pen/oNvpPmE?editors=1100

Момент №1:
Картинка = 470px

Задайте ей max-width: 100%

Момент №2
Кнопка слайдера выходит за рамки

Николай , Flexbox - одномерная система. Он "видит" строку только в одном направлении. Поэтому нельзя увеличить один элемент, не затронув другие в строке.

Вариант №1: CSS GRID
При этом, CSS Grid, например, двумерная.
Она позволяет работать и с колонками и со строками.
Как вариант, можно использовать её: https://codepen.io/hisbvdis/pen/pozdPeW
В этом примере получилось сделать смещение в сторону при увеличении элемента

Вариант №2: CSS Grid со смещением вниз
В это варианте сделал смещение вниз, но здесь нужно сделить за правильным количеством выставленных строк в гриде. И увеличение элемента смещает все нижележащие, перенося их на новую колонку.
https://codepen.io/hisbvdis/pen/bGbYRpL

Вариант №3: CSS Columns
В этом случае используется функционал CSS Columns.
Увеличение элемента приводит к тому, что он смещает внизу все элементы в колонке, которые все равно переносятся в новые колонки для равномерного распределения.
https://codepen.io/hisbvdis/pen/oNvoWmN

P.S. Все примеры не претендуют на идеал и представляют пример, который можно доработать.

P.P.S. Как я написал в комментариях, недоработкой Вашего макета кажется то, что не продумано, куда будут деваться элементы, которые смещаются вниз. Они же не могут просто улетать вниз без последствий для всех последующих блоков

.wices:empty {
    display: none;
}

Как вариант, можно абсолютно спозиционировать блок относительно родителя и привязать к нижней его части

Сохраняете код в отдельный файл с расширением .svg.
В свойстве background указываете ссылку на этот файл как на изображение

Например, вот так

https://codepen.io/hisbvdis/pen/MWgvZRr

что надо исправить, что бы секция content, прокручивалась правильно, иначе он за лазит на aside

1) Ограничьте высоту блока с классом .mainс основным содержимым. Например, задав ему высоту, равную общей высоте минус высота шапки и подвала max-height: calc(100vh - 50px - 100px);
2) Свойство overflo-y: auto перенесите с элемента .main элементу .wrapper-of-content

Результат:
https://codepen.io/hisbvdis/pen/wvwqJVJ

Можно ли на чистом CSS

Есть свойство position: sticky;, но оно не очень хорошо поддерживается и не идеально еще работает.

Результат:
https://codepen.io/hisbvdis/pen/wvwqMYo

1) Чтобы выделить все элементы, которые являются "дочерними" текущему (находятся на один уровень ниже), следует использовать знак "больше" и звёздочку

.first > * {
    opacity: 0.5;
}

2) Чтобы выделить все элементы внутри текущего, которые находятся на любом уровне вложенности, следует использовать просто звёздочку без знака "больше"

.first  * {
    opacity: 0.5;
}

К сожалению, не силен в SVG, но нашел такую закономерность.
У Вас в SVG 3 элемента <pattern> с id="star", внутри которых находятся две линии, образующие "плюс".



Так вот, у Вас есть правило, которое окрашивает линии внутри элемента с тего ="id"в красный цвет при наведении


Если сделать для каждого элемента <pattern> уникальный ID, а для элемента circle сослаться на этот уникальный ID, то при наведении на первый пункт, цвет у других плюсов не меняется

Например, вот так
https://codepen.io/hisbvdis/pen/xxKqqGN

на css

Например, вот так.
При уменьшении экрана, меню скрывается и появляется кнопка "Меню".
При нажатии - выезжает меню

https://codepen.io/hisbvdis/pen/mdbRZvV

Цель вопроса, как сделать так, что бы ячейки не сжимались

UPD: Нужно задать высоту строк, добавляемых автоматически через grid-auto-rows

Результат:
https://codepen.io/hisbvdis/pen/RwbpPbj

Нельзя.
position: absolute забирает элемент из потока. Поэтому он для всех других элементов он становится несуществующим.

Задайте ширину дочерних элементов. Например, 30%
Результат

P.S. А еще лучше - используйте Flexbox (Результат)

P.S. Для родителя у Вас задана ширина 300px. Как-то маловато.