Как вставить grid в grid?

Это же надо так вопрос завернуть вместо того чтобы просто спросить почему дочерний элемент флекса не занимает всю доступную ширину родителя :)

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

Т.е.
- либо задайте ширину руками
- либо избавьтесь от обертки grid-2, задав этот класс вот этому элементу grid-1-item-2
- либо уберите флекс у grid-1-item-2

Как скопировать код панели навигации на все странички сайта (проекта)?

Александр, чем это отличается от моего первого варианта?

Как скопировать код панели навигации на все странички сайта (проекта)?

- SSI
- gulp-file-include - плагин для галпа (я бы назвала его мини-шаблонизатором)
- Шаблонизатозы: Nunjucks, Twig, Pug
- Генераторы статики типа 11ty (Хороший обзор https://www.youtube.com/watch?v=DtTadxKrFMY)
- php
- взрослые CMS

Наверняка что-то ещё, о чем я забыла

Как сверстать эту секцию?

Syrone, тогда пока на "десктопах" точно не вижу смысла делить картинку на части

Чем заменить тег br?

Зачем вам нужно его заменять?
В теории, можно пооборачивать в span части строк и задать им блочность.

Как сверстать эту секцию?

Syrone, я не знаю, что происходит у вас макете при адаптиве или есть ли какая-то анимация у этой композиции.

А так, не вижу смысла разбивать её на несколько. С какой целью? Побольше оберток понаделать, да стилей понаписать?

Почему текст выезжает за блок и ему всё равно на ограничение?

RINCODE, показывайте на codepen.io

Почему текст выезжает за блок и ему всё равно на ограничение?

RINCODE,

Аааа у меня вообще не работают стиле ниже, диполей флекс и т.п. что делать

Очевидно проверять валидатором. Смотреть что там со скобками и прочим. Разметку тоже можно.

Почему текст выезжает за блок и ему всё равно на ограничение?

Потому что это стандартное поведение текста, если ему не заданы переносы или overflow.

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

RINCODE, это один из вариантов

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

RINCODE, если позволяет макет, то заменить на просто фон без псевдо и абсолюта. По куску вашего скрина это не определимо.

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

- Прибить фоном, а не абсолютом
- Задать z-index-1
- Задать тексту z-index

Предварительно почитав про контекст наложения, например, тут css.yoksel.ru/kontekst-nalozheniya

Вопрос по семантике. Нужно ли р/чел оборачивать в abbr?

Запустите скринридер и послушайте как лучше.

Можно ли сократить повторяющийся css без доп класса?

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

Да и главное, чтобы спрашивающий или другие читатели не приняли за чистую монету.

Как сверстать эту секцию?

Syrone, достаточно одной картинки. Зачем вам несколько? Они затейливо ведут себя при адаптиве?

Ссылка на главную страницу сайта не создает сниппета в месенджерах и соцках?

Valentine5, валидатор в помощь

Ссылка на главную страницу сайта не создает сниппета в месенджерах и соцках?

Valentine5, правильно: так не делать. По-хорошему, открывающий и закрывающий теги должны быть в одном файле.

Но если нет общего файла, то придется так.

не должно быть несколько?

Нет. Он может быть только один на странице.

Автоматическая сетка на grid по условию?

greencost, можно сделать грид в один столбец.
Первые два элемента запихать в одну клетку и задать ширину с выравниванием.

Ссылка на главную страницу сайта не создает сниппета в месенджерах и соцках?

Попробуйте заглянуть в собственный код

spoiler

Можно ли сократить повторяющийся css без доп класса?

HardBot, код скомпилируется ровно в то, что и было и никакого сокращения не будет.
Собственно в этом варианте и миксин ничего особо не сокращает.

Не могу установить модульный зависимости. При команде npm i выдает ошибку. Выручите?

Поскольку неизвестно, что там вообще происходит, я бы начала с русских букв и пробелов в пути