Сергей delphinpro

Эта функция работает мало где.
https://caniuse.com/css-element-function
Ваш редактор может просто о ней не знать.
Примеры использования можно найти в документации MDN: CSS/element()

Во-первых, он не выходит



Во-вторых, нужно точно ставить вопрос



А ответ очевиден как день:
всё потому, что контент не помещается в отведённую область.
Вы же сами написали – 60 пикселей высота шапки.

Absolute вырывает элемент из обычного потока. В потоке остаются h2 и h3. У последнего, вероятно присутствует нижний внешний отступ (margin-bottom). А дальше на сцену выходит эффект, называемый схлопывание марджинов

Не использовать rgba в css, заменяя цвет картинкой – это только если нужно поддерживать IE8 и ниже. Тут или реально нужна такая поддержка, или верстка очень старая, или верстальщик отстал в развитии.

Текст картинкой – те же причины, плюс еще одна. Экономия на подключении шрифта ради пары слов. Но тут опять же можно пересобрать шрифт, ставив в нем буквально несколько нужных символов. Вывод – картинкой было проще и быстрее, либо некомпетентность верстальщика.

Я бы даже ошибками это не назвал. Либо очень древнее легаси, либо некомпетентность исполнителя.

Укажите требуемую позицию:

clip-path: circle(300px at 300px 500px);

У инлайна по умолчанию стоит выравнивание по базовой линии текста.
Вам достаточно просто переопределить его

vertical-align: top;

Но верстка сеток на inline-block – это архаизм. Здесь вполне можно использовать flex + flex-wrap. А лучше grid, если можно по условиям тз.

Ширина 1/3 и jusity-content:center
Зачем всё усложнять?

Работать будет только если элементы на одном уровне

<input type="checkbox" id="burger">
<div id="nav2"></div>

#burger:checked + #nav2 {
}

Note:
Использовать идентификаторы для задания стилей – плохая практика.

.block {
  z-index: 0; // необязательно, не всех случаев
}
::before {
  z-index: -1;
}

разместить абсолютом

document.querySelector('.section__top-nav-second-menu-item')
  .addEventListener('click', function(event){
    event.target.classList.toggle('is-active-list')
  });

.section__top-nav-second-menu-item.is-active-list::after {
}

radial-gradient

Если не хочется гуглить и думать, то есть несколько вариантов решения.

1. Задать границу для внешнего блока (.black)
2. Задать паддинг для внешнего блока (можно 1px)
3. Создать новый поток (контекст) внутри внешнего блока (честно говоря забыл как это называется)/ Новый контекст создается если задать overflow отличный от visible, внутри flex и grid контейнееров, внутри таблиц, внутри плавающих элементов (float) и может еще что-то подзабыл.
4. Использовать паддинг вместо марджина для внутреннего элемента.
5. Не использовать марджин на внутреннем элементе, и заменить его на паддинг у внешнего.
и т.д.

Для .btn уберите стиль flex: 0 0 100px и добавьте min-width: 100px