Рома Зварич

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

Если Вы используете код ответа к этому вопросу, то для родителя нужно поменять свойство justify-content: space-between; на justify-content: flex-start;

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

Пример кода с такой анимацией

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

UPD 24.08.2022
1) Выберите в левой панели раздел "Расширения" и "Отображать встроенные расширения"


2) Найдите расширение Git и нажмите "Отключить"

Задайте блоку с классом .nav свойство flex-grow: 1, позволив ему увеличиваться. Этим данный блок и вытолкнет следующий блок к правому краю.

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

Это естественный отступ, который остаётся у любого текста, чтобы при переносе строки между строками было расстояние.
Вы можете уменьшить этот отступ, задав для класса .logo свойство line-height: 1. А если нужно, чтобы там вообще не было отступа, можно еще меньше задать. Например, line-height: 0.8

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

Чтобы ширина блоков была пропорциональная контенту, следует родителю ul задать display: table, а детям li задать display: table-cell;.
Ну и выравнивание содержимого потом.

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

Flexbox действительно может помочь.
Для каждой ширины экрана нужно задать базовую ширину дочерних элементов.

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

JustScript88 ,
1) Вы вторую колонку делаете абсолютно позиционированной. Это неправильно.
2) Много лишних свойств используете.
3) Много ошибок по вёрстке

Ознакомьтесь с технологией Flexbox. Вот пример, как с помощью неё сделать Ваш макет.
https://codepen.io/hisbvdis/pen/JgOzax

Azamat_TURBO,

1) в описании проблемы Вы указываете, что высота контейнера 70px, а в коде ему задана высота 100px.

2) Вы не указали, куда должен выступать дочерний элемент (в какую сторону). В примерах рассмотрю вариант, при котором элемент выступает вниз.

Пример №1 (относительное позиционирование):
Дочернему элементу задать

position: relative;
  top: 30px;

https://codepen.io/hisbvdis/pen/xvPBGW?editors=1100

Пример №2 (трансформация):
Дочернему элементу задать
transform: translateY(30px);
https://codepen.io/hisbvdis/pen/bXYZEV?editors=1100

Пример №3 (абсолютное позиционирование):
Родителю
position: relative;
Дочернему

position: absolute;
  top: 30px;

https://codepen.io/hisbvdis/pen/bXYZEV?editors=1100

У Вас уже есть блок с классом ".intro__left". Добавьте еще один рядом с ним с классом, например, "intro__right", куда переместите картинку.
А для родителя задайте

display: flex;
align-items: center;

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

Если речь идёт во выравнивание по вертикали, то к классу "container" следует добавить два свойства

display: flex;
align-items: center;

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

"Смотреть" - это не кнопка вовсе, а просто текст.
Как вариант, можно убрать для него события указателя, добавив pointer-events: none

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

1) Чтобы фон ссылок занял всю высоту, задайте для .nav__link свойство display: inline-block;

Пример:
https://codepen.io/hisbvdis/pen/qePpdO?editors=1100


2) Увеличить ширину фона по горизонтали можно за счет "padding"

Для родителя можно задать еще justify-content: space-around;

Не очень понял, для чего именно Вам нужно оставлять пустую ячейку.
Но чтобы первый элемент занял две колонки как на макете, достаточно задать для него "grid-column: span 2;"
Остальные элементы сами занимают следующие ячейки

Пример:
https://codepen.io/hisbvdis/pen/NQaGvv

Один из вариантов
1) Перенесите элемент логотипа внутрь #menu.
2) Расположите элементы внутри #menu в одну строку с помощью Flexbox
3) Задайте зеленую заливку не списку, а всему #menu (ну или header)

Результат

Указать такую логику в CSS нельзя.
Можно либо выбрать либо один следующий элемент на том же уровне, либо все последующие.

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

<div class="buttons">
    <div class="row">
        <button class="parent">...</button>
    </div>
    <div class="row">
        <button class="parent">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
    </div>
    <div class="row">
        <button class="parent">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
    </div>
    <div class="row">
        <button class="parent">...</button>
    </div>
</div>

Адаптивная вёрстка - это вёрстка, которая адаптируется под диапазон экранов с сохранением комфортного взаимодействия с интерфейсом. Делаете Вы её на Flexbox или на Float, не важно. С использование медиа запросов или без - не важно

Если не нужен IE, то можно и двумя строками это сделать

.fix {
    ...
    position: sticky;
    top: 0;
}