Как сделать блок в css, чтоб от него зависели блоки ниже?

На базе вашего безобразия https://jsfiddle.net/pfmkcvsr/

1. В вашей верстке не должно быть !important.
!important нужен лишь для того, чтобы перебить стили, которые прилетают из чужих (не ваших) js.

2. В верстке стараются не использовать фиксированную высоту. Контента может оказаться больше или меньше, чем было в макете. Или пользователь поменяет шрифт в браузере.

3. float придуман для того, чтобы один элемент обтекался другими. Обычно применяются для обтекания картинки текстом. А вовсе не для сеток. Для сеток есть флексы и гриды. Их и используйте.

4. Плюсы это не контентные изображения, их не должно быть в разметке. Их делают фоном и/или псевдоэлементами.

5. Это сочетание class="for_desktop display-none-desktop" меня просто ставит в тупик.

Почему появляется белый промежуток между элементом с границей и контентом?

Michail, там не надо регистрироваться, чтобы делиться ссылкой на код. В этом вся прелесть.
Просто нажимаете на save или fork и копируете ссылку.

Как сделать подобный заданий фон для заголовка?

Вадим, да, все новички верстают одни и те же макеты.
И ответ там мало отличается от моего.

Как быть, если на макете нет четко выраженного контейнера?

Pavel_20, да, если паддинг одинаковый.
Про центрирование я имела в виду, что вдруг задача решается чем-то вроде justify-content center

Как быть, если на макете нет четко выраженного контейнера?

Примерно так.
Но вы не показали макет.
Возможно, есть другие решения, например, будет достаточно центрирования.

Как сделать input с адаптивной шириной?

Флексами с помощью flex-grow и мин ширины https://jsfiddle.net/g1dzeors/

Как заставить блоки расшириться?

1. Сделать обертку
2. Ей перенести свойства ширины, высоты, overflow и фон
3. У box заменить флекс на инлайн-флекс и задать минимальную ширину 100%
https://jsfiddle.net/608uebsn/

Либо просто заменить флекс гриды и не заниматься ерундой.

Как задать grid разметку, чтобы первый элемент был фиксированный, а остальные(неопределенное кол-во) занимали 1fr?

Чтобы все остальные были одинакового размера

grid-template-columns: 100px repeat(auto-fit, minmax(1px, 1fr));

https://jsfiddle.net/c1ear2o4/

Если разному и должно определяться по содержимому, то можно заменить 1fr на max-content
https://jsfiddle.net/987hv4y1/
или min-content
https://jsfiddle.net/987hv4y1/1/

Как сделать подобный заданий фон для заголовка?

Mikhail, если что, выкладывайте в песочницу

Как сделать подобный заданий фон для заголовка?

Можно псевдо располагать абсолютами, а отступы паддингами. И не забыть overflow блоку.
Тогда можно будет сделать вертикальное выравнивание текста, типа space-around

Как сделать подобный заданий фон для заголовка?

Mikhail, три псевдоэлемента

Как сделать подобный заданий фон для заголовка?

Вариант с картинкой прекрасен. До тех пор, пока текста не окажется больше или меньше или не изменится размер шрифта (в том числе пользователем).

Зато псевдоэлементами и/или градиентами блоку будут не страшны переполнения.

Не могу расположить правильно, как это сверстать?

И тут я соединю 2 комментария выше :)

Телефон это действительно не контентное изображение, а значит не img.
Но зато его можно сделать не просто фоном, а фоном псевдоэлемента.

А дальше флексом или абсолютом.

Весьма схематически флексами: https://jsfiddle.net/sme3towx/
Абсолютами (если нужно менять порядок) https://jsfiddle.net/6jkuqwa2/

Или гридами.

Что делать если не могу запомнить элементарное?

Александр Зелицкий,

ну а как начать понимать то? Уже несколько раз думал забить но как-то хочется научиться

Найдите бесплатный заказ среди друзей. Реальные задачи обычно помогают начать делать.
Когда хочется научиться, обычно не хочется ни спать ни есть, а только код копать.

И мой старый ответ Как научиться верстать без проблем?

Рассчитывал за месяц выучить HTML и CSS

Не, так не работает. Хорошо, если за месяц научитесь осознанно отличать padding от margin. Это нормально.
И дело не во времени, а в количестве и качестве макетов.

Как при клике на блока появилось его класс?

Поиск элементов https://learn.javascript.ru/searching-elements-dom
События, в том числе клик https://learn.javascript.ru/introduction-browser-events
Добавление класса https://learn.javascript.ru/styles-and-classes#cla...

И id должны быть уникальны. Не может быть трех элементов с id="btn__modal"

Как сделать скролл за пределы экрана?

Это у вас в коде:

@media (max-width: 880px) and (min-width: 320px)
.container7 {
    width: 2000px;
    overflow-x: scroll;
}

Внимание вопрос, зачем вы задаете ширину 2000px, если вам нужно, чтобы блок не был больше ширину окна?

Как только вы уберете эту ширину и зададите flex (и его дополнительные свойства, которые вам нужны), чтобы дочерние элементы выстраивались в строку, всё станет хорошо.

Как убрать сдвиг влево при добавлении картинки?

Кирилл Орлов, такое со всеми приключается, а иногда и еще круче ))

Как убрать сдвиг влево при добавлении картинки?

Кирилл Орлов,
Всё правильно.
Вы добавляете картинку, высота страницы увеличивается и появляется вертикальный скролл. Неужели вы этого не замечаете? Он забирает кусочек ширины (примерно 12-20px в зависимости от браузера).
Контейнер у вас центрирован и значит он сдвигается на половину ширины полосы прокрутки.

Как правильно сверстать?

Сначала нужно понять, как эти блоки и блоки следующие за ними будут себя вести:
- если контента будет больше или меньше
- при адаптиве

Затем выяснить какие нюансы есть у разных способов.
Например, при трансформе или relative за блоком будет зарезервировано то место, где он находился изначально.
Абсолют выведет элемент из потока и его родители и соседи перестанут что-либо знать о его размерах.
Трансформ создаст новый контекст наложения и это может сыграть свою роль при разных комбинациях z-index.
Margin в % считается от ширины родителя.
И т.д.

Потом выбрать тот вариант, который вам больше нравится.

Вероятнее всего удачно подойдет вариант с padding и равным ему отрицательным margin.

Как правильно сделать ширину элемента?

Мир сходит с ума.
Для этого есть padding.