Legal Adviser

Я бы попробовал бы сделать три прямоугольника внутри одного квадрата. А иконку саму свж абсолютом.

В файле стилей идите от большего к меньшему. А то получается что программа читает сверху вниз и цепляет самый первый наиболее подходящий по размеру. Если я не прав - поправьте меня.

Всё зависит от того, как хочешь реализовать структуру основного блока.
Может не айс пример, но можешь посмотреть в консоли как у меня реализовано примерно то, что ты хочешь. Просто посмотри метки и категории и результат поиска.

Таблица либо грид либо флексами. Я бы делал flex, а зубы - svg одинакового размера :before
А списки (зелёного цвета) ссылками?

На планшете не удобно, но думаю, что как то так:

container {
  max-width: 1220px;
  width: 100%;
  padding: 0 10px;
  margin: 0 auto;
}

.title {
  font-family: 'Arial', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #01353E;
}

.inschool {
  background-color: #336699;
}

.inschool__title {
  margin-bottom: 20px;
  text-align: center;
  background-color: #E69EFF;
}

.inschool__column {
  
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #E69EF1;
  border: 2px solid red;
}

.column__item {
  display: inline-flex;
  flex-wrap: wrap;
  flex-direction: row;
  text-align: center;
  background-color: #4CBA00;
  border: 2px solid #00FFFA;
  padding: 0 5px;
  flex: 1 1 350px;
}

.column__title {
  display: flex;
  width: 100%;
  justify-content: space-between;
  font-size: 24px;
  line-height: 28px;
  text-transform: uppercase;
  border: 2px solid #000;
  background-color: #FFEE00;
  margin-bottom: 5px;
}

.column__text {
  font-size: 14px;
  line-height: 18px;
  letter-spacing;
  0.6px;
  text-align: left;
  padding: 0 5px;
  background-color: #E6EEF1;
  border: 2px solid #000;
  /*flex: 1 0 auto;*/


}

Воспользуйтесь модулем CSS3 columns с помощью которого возможно будет сделать многоколоночный макет. Он позволит сделать так, чтобы ваш контент состоял из вертикальных контейнеров. Что-то типа газеты или журнала.
С помощью column-width сделаете минимальную ширину контейнеров. А с помощью column-count - кол-во контейнеров.

Солидарен с Randewoo.
В коде есть:

.b-grid>I {
    background: linear-gradient(to bottom,#c7c7c7,#c7c7c7 50%,transparent 50%,transparent) 0 0/1px 2px repeat-y;
}
.b-grid._inv>I {
    background: linear-gradient(to bottom,#fff,#fff 50%,transparent 50%,transparent) 0 0/1px 2px repeat-y;
}
.b-grid>I+I {
    left: 30rem;
}
.b-grid>I+I+I {
    left: 60rem;
}

Стоит их убрать и всё, без них.

На сколько я понимаю, проблема при просмотре в мобильной вёрстке, не так ли?
Судя по данному коду:

@media all and (min-width: 998px) { 
   .nav2 {
      margin-left: 0px;
      position: relative;
      left: -320px;
    }

У вас всё время такая проблема будет. На мой взгляд лучше вам воспользоваться CSS flexbox отдельно от вёрстки предназначенной для просмотра на PC. Т.е. лучше сделать отдельный файл для версии моб. устройств.
Полагаю, что ваш <div class="header-content"> лучше сделать в виде Flex-контейнера, в котором будут Flex-элементы. Это вам даст возможность "гибкого макета", при этом наезжать ничего не будет и есть возможность каждому элементу присвоить и значения ширины/длины.
Следовательно, элемент <div class="logo"> у вас возможно будет построить не только, когда он сверху над , но и в целом даст возможность избавиться от лишнего блока <div class="e3lan e3lan-top"> (при просмотре @media only screen and (max-width: 990px) .e3lan-top).

На сайте, который указан вами, при просмотре в режиме моб.устройств всё сползает из-за:

<div id="tr-popup" class="tr-popup" translate="no" data-hidden="true" data-invalid="true" data-disabled="false" lang="ru"><div class="tr-popup__block"><span class="tr-popup__title_original">Оригинальный текст:</span> <span class="tr-popup__value"></span></div><div class="tr-popup__block tr-popup__block_a"><span class="tr-popup__link tr-popup__link_suggest" data-action="expand">Предложить перевод</span><a href="https://translate.yandex.ru" class="tr-popup__link tr-popup__link_service" target="_blank" data-action="navigate"><span class="tr-popup__logo tr-popup__logo_company"></span><span class="tr-popup__logo tr-popup__logo_service"></span></a></div><div class="tr-popup__block tr-popup__block_b"><textarea class="tr-popup__input" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" maxlength="1000"></textarea><div class="tr-popup__block tr-popup__block_submit"><span role="button" class="tr-popup__button tr-popup__button_submit" data-action="send">Отправить</span></div><div class="tr-popup__overlay tr-popup__overlay_submitted">Спасибо, перевод отправлен</div></div><span role="button" class="tr-popup__button tr-popup__button_close" data-action="clickClose"></span><span role="button" class="tr-popup__button tr-popup__button_menu" data-action="clickMenu"><span class="tr-popup__menu" data-action="disablePopup">Отключить подсказку с оригинальным текстом</span></span><span class="tr-popup__arrow"></span></div>

Стоит её удалить, и всё вроде нормально отображается.