Сергей delphinpro

Зато вы можете задать display flex для tr и display:block для остальных табличных тегов и добиться требуемого отображения.

Я так понимаю, это у вас inline-block элементы
Выравнивание по умолчанию для текстовых элементов идет по базовой линии. Есть текст — выравнивается по базовым линиям текста. Нет текста — за базовую линию пустого блока считается его нижняя граница.
Как-то так.

У вас шапка не помещается, разве не видите?
Переделывайте ее раскладу по другому на маленьких экранах.

В целом верстка вроде норм. хотя я сильно не вникал.
Но по организации кода претензий вагон.
Я приведу лишь один пример (но там их полно)

Есть блок .b-logo
И все стили для него задаются через
header .b-logo {}
Накуя?!!

Этот блок больше нигде не встречается. Верстальщик, зачем ты увеличиваешь без надобности специфичность селектора??? (Может потому что не в курсе что такое вообще специфичность...)

Имена классов где-то слишком общие (.block, .desc, .bottom), где-то слишком сокращенные ('.p-row). Имя класса должно отражать назначение блока. Посмотрел на класс и примерно представляешь что он собой представляет и для чего и где используется.

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

UPD
Посмотрел чуть дальше

.lvl3 .bs-ipos .block .p-row {}

ну это вообще мрак...

<div class="layout">

  <div class="layout__row header">
    <div class="header__cell">
      Пусть это HEADER
    </div>
  </div>

  <div class="layout__row navbar">
    <div class="navbar__cell">
      А это пусть NAVBAR
    </div>
  </div>

  <!-- variant 1 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__col layout__col_main">
        main
      </main>
      <aside class="layout__col layout__col_side">
        side
      </aside>
    </div>
  </div>

  <!-- variant 2 -->
  <div class="layout__row">
    <div class="layout__container">
      <main class="layout__main">
        main
      </main>
      <aside class="layout__side">
        side
      </aside>
    </div>
  </div>

  <div class="layout__row footer">
    <div class="footer__cell">
      Это FOOTER
    </div>
  </div>

</div>

Используйте padding

Чтобы сработало, фигуры должны быть расположены в коде после списка
Причем списка не должно быть =)

пример

<div class="hover_1">2321321
<div class="hover_2">2321321
<div class="hover_3">2321321

<div class="hovered_1">
<div class="hovered_2">
<div class="hovered_3">

.hover_1:hover ~ .hovered_1 {}
.hover_2:hover ~ .hovered_2 {}
.hover_3:hover ~ .hovered_3 {}

Фигуры могут располагаться в своем контейнере:

<div class="hover_1">2321321
<div class="hover_2">2321321
<div class="hover_3">2321321

<div class="container">
  <div class="hovered_1">
  <div class="hovered_2">
  <div class="hovered_3">
</div>

.hover_1:hover ~ .container .hovered_1 {}
.hover_2:hover ~ .container .hovered_2 {}
.hover_3:hover ~ .container .hovered_3 {}

https://jsfiddle.net/DelphinPRO/h6mkz4dr/
min-width:0;

Вы подключаете один и тот же шрифт и хотите чтобы он у вас отображался по разному?
Странное желание.

Во-первых, не нужно подключать ttf. Он огромен. Прогоните шрифт через трансфонтер и подключайте форматы woff2 и woff.

Во-вторых, у вас должны быть разные файлы с разными весами. Вот их все и нужно подключить, указывая соответствующий font-weight.

@font-face {
    font-family: 'MullerBold';
    src: url('fonts/MullerBold-normal.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: 'MullerBold';
    src: url('fonts/MullerBold-bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
}

Как верстать сайты большей ширины, чем твой экран?
Как сверстать макет, ширина которого больше, чем ширина экрана моего монитора?
Как верстать макет большего размера чем экран?
Как на наутбуке верстать под большее разрешение?
Как сверстать сайт на маленьком экране?
...

.my-flex-box svg {
  flex-shrink: 0; // запретить ужиматься во флекс-контексте
}

Полагаю, у вас лишние закрывающие теги здесь
<div class="ourPhilosophy"></div>