wonderingpeanut

товарищ, ну ты инструментами разработчика вооббще пользоваться не умеешь? жмешь 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...

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

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

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

Какого-то определнного стандарта нет.

Но есть семантическая верстка, т.е. использование наиболее подходящих для контета тегов, и есть несемантическая верстка.

Семантическая верстка улучшает доступность сайта для скринридеров - людям с плохим зрением и прочим пользователям скринридеров будет гораздо проще использовать сайт, в котором соблюдается семантика. Также семантика помогает с СЕО.

Я бы сказал, что правильнее использовать семантическую верстку. Значение тегов можешь посмотреть в mdn

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

нагуглил в интернетах, не проверял работоспособность
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).

если тип данных [элемента] это строка или число, можешь создать объект, где элемент будет ключем, а значение - нужное тебе число.

const dict = {
  'How to cook and egg': 1,
  'Birds': 2
};
const element = somehowFindElement();
... // do something with dict[element]

Привет.
Согласно некоторым репортам, это распространенная проблема со шрифтом Helvetica на яблокоустройствах и в браузере мозила.
Рекомендуют не использовать этот шрифт.
Фонт Arial схож с Helvetica, попробуй его.