wonderingpeanut

Вообще описанное тобой поведение - это поведение элемента со свойством position:sticky - элемент "прилипает" к своему родителю https://codesandbox.io/s/zealous-pare-3xhc8h?file=...

товарищ, ну ты инструментами разработчика вооббще пользоваться не умеешь? жмешь ctrl+shift+c, выбираешь кнопку, смотришь марджины/падинги, поднимаешья по древу к родителю, смотришь марджины/падинги.
убираешь найденные марджины/падинги и вуа-ля.

предполагаю что марджины падинги установлены на ul и li.

или сделай общий резет марджинов и падингов

вот самый простейший резет который можно применить

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

Ничего не разделяя, простым движением руки создаем грид из 2 колонок и 8 строк, элементам грида делаем gridRow: i / i + 3, где i - номер элемента

бум: https://codesandbox.io/s/purple-morning-eiz6gb?fil...

box-shadow: inset

С помощью онклика либо лисенера изменения url (или что у тебя изменяется при переходе по ссылке).

Онкликом, чтобы меню с подменю не закрывалось, нужно добавить проверку if (!hasChildren)

mdn
если умеешь пользоваться гугл переводчиком, freecodecamp

Выбираем элементы li неупорядоченного списка с классом products:

ul.products > li {
  /* стили */
}

Можно сделать более специфичный селектор элемента списка, добавив к li какой-нибудь общий класс.

upd: после изучения страницы увидел, что все продукты имеют класс product. Можно выбрать элементы по этому классу

.product {
  /* стили */
}

Жирность ставится не в пикселях, а числом, либо ключевым словом.
Если жирность выставлена правильными единицами, но все равно не соответствует макету, скорее всего не подгружен шрифт.

в css нет вложенных селекторов

приветствую.
1. можно сделать из двух картинок одну.
2. можно обернуть картинки в контейнер и дать контейнеру position:relative, тогда маленькая картинка будет позиционироваться относительно этого контейнера
3. можно воспользоваться гридами

Приветствую.
Самый простой вариант - сделать div.row с ошибкой position absolute.
Вариант сложнее - при появлении ошибки уменьшать высоту div.form-container на высоту div.row с ошибкой.

нагуглил в интернетах, не проверял работоспособность
1) screen.orientation.lock('landscape');
2) manifest.json:

{
    "display":      "standalone", 
    "orientation":  "landscape", 
}

<link rel="manifest" href="manifest.json">

во-первых, генерализируй свои карточки, они все одинаковые в плане стилей

<div class="company-advantages__card">
  <div class="card">
    <div class="card__img">
      <img src="/img/left.svg" alt="logo" />
    </div>
    <div class="card__text">
      «Спектр-М» – единственный производитель оборудования для высокоточного анализа различных веществ в
      России.
    </div>
  </div>
  <div class="card">
    <div class="card__img">
      <img src="/img/center.svg" alt="" />
    </div>
    <div class="card__text">
      Работаем под конкретного клиента и его потребности, разрабатываем такие приборы, которые будут
      решать точно определенную задачу.
    </div>
  </div>
  <div class="card">
    <div class="card__img">
      <img src="/img/right.svg" alt="" />
    </div>
    <div class="card__text">
      Возможность участия в процедурах государственных закупок на ЭТП по 223-ФЗ и 44-ФЗ
    </div>
  </div>
</div>

у тебя элемент с классом company-advantages__card имеет display: flex. Пользуйся возможностями флексбокса.
Например, можешь выставить расстояние между детьми флекс родителя с помощью свойства gap (в твоем случае column-gap).