Дмитрий

Традиционное описание структуры посадочной страницы ничего вам не даст 100%, нужно понимать почему на одних лэндосах что-то есть, а на других этого "чего-то" нет.

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

По маркетингу курсы есть на geekbrains,stepic,интуит + тьма тьмущая книг в сети.

Если не отговорил - "Идеальный Landing Page" книга, а после прочтения успехов вам на курсах, ибо вы сами поймете смысл начала этого поста.

Используйте медиа-запросы.

Для nav-item присвоить идентификатор (к примеру bars), за ним (за закрывающим тэгом списка) кнопку создать и присвоить обработчик
onclick="myFunction()"

Примерно так выглядеть будет...

<button id="btnc" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation" onclick="myFunction()">
      <span class="navbar-toggler-icon"></span>
    </button>

Далее нам нужно к #bars присвоить по клику класс...Пускай будет snos

function myFunction() {
   var element = document.getElementById("bars");
   element.classList.toggle("snos");
}

Можно инлайн, можно внешним js файлом подключить.

После этого нужно прописывать стилевые свойства для .snos, учитывая его взаимодействия с соседями, если мы хотим чтобы при появлении этого класса изменялись стилевые свойства соседей.

Селекторы CSS в помощь тут!

//up

На тот случай, если вообще ничего не понятно, вот ссылка на законсервированный и сырой проект.
Менюшка носитель этого кода, инструменты разработчика помогут усвоить инфу, что я подкинул.

Белорусский дизайн) Верстать гридами и вкладывать друг в друга или с позиционированием плясать.

У CSS Grid Layout порог вхождения в разы меньше, нежели чем у попсового фреймворка Bootstrap. Дальнейшая поддержка проекта - основная причина, по которой BS является обязательным навыком. Если вы запилите проект на гридах, то проходимцам из смежных областей уже в разы трудней будет поддерживать вашу писанину. Это всё, что нужно знать о хотелках заказчиков и работодателей.
Что до субъективного мнения, то - если не знаешь язык, то лучше фреймворком не пользоваться. Рекомендую предпочтение отдавать изучению языка, дабы не молиться на фреймворки, как на свое спасение при реализации ТЗ.

Flex-shrink
и
Ограничить длину текста до n строк с помощью CSS,
если я до конца понял, в чем суть вопроса.

1. 3 родителя div, и CSS Background
2. 1 родитель и три дочки, с подвязкой псведоэлементов before & after
3. Фон без текста вырежать, через CSS Background ставь 1 родителю, дальше 3-х дочек по флексу выровнять (можно даже float тут использовать, по-старинке).

Можно классически "зафлотить" все, можно гридами разложить, как фанатазия или ТЗ подсказывает.

Открываем оглавление топовых книг, типо "Большая книга CSS", дальше глядим на свой багаж знаний и сверяем наличие в книге и у вас информации, если нутро рвется в бой против сомнений, проходим сертификацию, но не ради сертификатиков, а ради фактического обнаружения пробелов в познании технологий.

sertificat.templatemonster.ru
https://certification.mail.ru/
www.w3schools.com
https://www.freecodecamp.org/
https://geekbrains.ru/

css.yoksel.ru/background-blend-mode
+ уже описали другой вариант с фильтром выше.

для body

max-width: 316px;
    overflow-x: hidden;

Блок графы поиска

body > div.main > header > div.header > div > div > div.col_4.col_md_5.col_xs_12.col_xxs_12 {
width: 86%;}

Ну и дальше в том-же духе...

Если флексы и гриды не используются в проекте, то разумным будет отступы в самой картинке сделать, подогнав под размер соседей, путем изменения размера холста (да даже в "деревянном" ms paint'e подобное провернуть не трудно), а после перезалить на место донора, с аналогичным именем.
Если копать код, там переписывать придется многое, ради внедрения флексов или гридов.

1.https://codepen.io/
2.https://jsfiddle.net/
3.https://www.freecodecamp.org/
4.https://www.w3schools.com/
5.https://pikabu.ru/story/novaya_bolshaya_kniga_css_...
6.Уроки по верстке и css модулям в youtube.

Для остального есть второсортные биржи и проекты "за доширак", для разгона портфолио.

Через overflow можно скроллинг задать.

up

Пардон, в суть вопроса не сразу въехал.

Контент можно по центру выставить через:
1) margin (auto выставите)
2) text-align: center;
3) flexbox
4) css grid
5) padding прописать - подойдет для статичного контента (но это тот еще изврат)

Залейте код на
https://jsfiddle.net/
https://codepen.io/
или скиньте ссылку на сайт, глянем какой из вариантов более удобен.

CSS Grid Layout (grid-template-columns: minmax)

Исходный код смотреть нужно применяя разрешение обоих девайсов, скорее всего процентное соотношение одного из селекторов дало о себе знать. Сравните блоки объявлений у картинок и контейнеров картинок.

Вариант №1

<div class="wrapper">
  <div class="item item-1">item-1</div>
  <div class="item item-2">item-2</div>
  <div class="item item-3">item-3</div>
  <div id="block" class="item item-4 wrapper-2">
    
    <div class="item">item-4-1</div>
    
  </div>
  <div class="item item-5">item-5</div>
  <div class="item item-6">item-6</div>
</div>

*
{
  margin: 0;
  padding: 0;
}

.wrapper
{
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 15px 1fr 15px 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  -ms-grid-rows: 1fr 15px 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

.wrapper-2
{
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  
}
#block
{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.wrapper-2 > .item
{
  background: red;
  -ms-grid-column-align: center;
  justify-self: center;
  margin-top: auto;
  margin-bottom: auto;
}

.wrapper > .item
{
  background: #cfcfff;
  padding: 15px;
}

.wrapper > .item-1
{
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 span 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / span 1;
}

.wrapper > .item-2
{
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 2 span 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / span 1;
}

.wrapper > .item-3
{
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  grid-column: 3 span 1;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1 / span 1;
}

.wrapper > .item-4
{
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 span 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 2;
}

.wrapper > .item-5
{
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 2 span 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 1;
}

.wrapper > .item-6
{
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  grid-column: 3 span 1;
  -ms-grid-row: 3;
  -ms-grid-row-span: 2;
  grid-row: 2 / span 1;
}

.wrapper > .item:nth-child(odd)
{
  background: #cff1ff;
}

Указание координат для grid сетки, не препятствует задать использовать flex для координируемого блока. Flex с Grid'ом отлично дружат.

Вариант №2
https://habrahabr.ru/post/178021/

Что devTools говорит по блокам объявлений? относительные или абсолютные пути прописывали? перепроверьте, а после слейте ссылку пожалуйста.

Без острой необходимости inline путем (в html код) внедрять css код не гигиенично. И СЕО-шник прав, поисковые машины это расценивают ущербным фактором.
Под "острой необходимостью" я подразумеваю приоритет в css при работе с JS, либо отсутствие возможности для отдельного url втащить конкретный стиль для класса или id.