Legal Adviser

Почти точно так же, как и в этом примере , только border-top отрисовать.

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

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

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

Солидарен с 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>

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