Natalia ivanova

https://codepen.io/Natalia_ai_ivanova/pen/OJVBWxr

например, так.
Описание:
https://developer.mozilla.org/ru/docs/Web/SVG/%D0%...

Можно использовать grid, разбив контейнер на две колонки и две строки. Блок слева положить в одну колонку и в grid-row: 1/3;. Блок справа - во вторую и его верхнюю часть - в grid-row: 1/2;, нижнюю - grid-row: 2/3;.
Более мелкие блоки поместить во flex.
Это один из вариантов) Думаю, с него можно начать.

Потому что используете float и display: table-cell.
Здесь они ни к месту.
Попробуйте применить flex, как, например, здесь: https://codepen.io/Natalia_ai_ivanova/pen/GRgeqxb

Вообще, хорошо бы навести порядок в оформлении кода, но это уже не относится к вопросу)

Так https://codepen.io/Natalia_ai_ivanova/pen/qBEMoaE

Потому что здесь
разные значения margin.
Задайте для ul одинаковые margin.

Добавить и изменить так:

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.complextable__item {
    border-radius: 30px !important;
    margin-right: 40px;
    width: 21%;
    min-width: 230px;
}
.nav-pills>li {
    /* float: left; */
}

Нашла, что влияет на исчезновение, это margin: -4px auto 20px; в h1 {}.
Если его убрать, то при всех значениях ширин h1 отображается.
С ним h1 при >1200 уходит сильно вправо из-за свойства right: -1000px у элемента :after.
Если важно сохранить точное положение h1 в мобильной и десктопной версии с участием margin: -4px auto 20px; , то придется разбираться более глубоко, возможно править целые блоки.

Потому что содержимое тегов li уже, чем заданная max-width.
Добавим к одному из li, например, так: EVERY DAY, MORE THAN 1,000 JORNEYS EVERY DAY, MORE THAN 1,000 JORNEYSEVERY DAY, MORE THAN 1,000 JORNEYSEVERY DAY, MORE THAN 1,000 JORNEYS и увидим, что второй блок растянется до заданного ему значения max-width.

При задании max-width предполагается, что ширина блока будет равна либо меньше его значения, в зависимости от ширины его содержимого.
https://developer.mozilla.org/ru/docs/Web/CSS/max-width

Сделайте так!

<li class="cataloglastli">
							<a href=""><img src="img/telephone.jpg" alt="telephone">855-5564-65651</a></li>

Или лучше так:

<li class="cataloglastli">
							<a href=""><img src="img/telephone.jpg" alt="telephone"><span>855-5564-65651</span></a></li>

Ошибка в разметке. В теге ul могут быть вложены только li, а в li - уже другие теги.

Попробуйте это: <textarea spellcheck="false">

Посмотрите здесь https://codepen.io/webinspect/pen/WvGXEZ

Думаю, это можно взять за основу и, поиграв со свойством translate, достичь нужного результата.

Можно так, например:

https://codepen.io/Natalia_ai_ivanova/pen/RwwMMRp