Арсений Матыцин

1. Не стоит вешать на body стили, обнуление отступа → максимум. Данный хак— выстрел себе в ногу при бездумном использовании. Тем более overflow:hidden;
2. Использовать абсолютное\фиксированное позиционирование для красного блока.
3. Использовать обертку на флексбоксах, которая распределит содержимое тела страницы на красный блок и остальное с flex-grow:[1 или больше] по странице.

4. Или банально убрать выстрелы себе в ноги таким образом.

$("#chater").load( url + ' #sections' );

Если верить документации, ты пропустил пробел, сформировав ссылку с якорем, вместо обращения к элементу с ID.

1. Вынести «полный список цен» из флекс-обертки.
2. Задать ссылке justify-self: flex-start.

ЗЫ: да и в принципе нет смысле использовать flex column для обертки. Выстраиваться один под одним элементы из коробки умеют.

1. Использовать конструкцию if else.
2. Проверять входные условия.
3. В том условии, в котором ты попал возвращать false после инструкции выполнения.

У меня перегруженный пример есть, но с комментариями. Это то, что тебе нужно, я думаю.

https://codepen.io/i-am-studio_ru/pen/NWGBMwo

В бутстрапе row это строка, задача которой → выстроить в линию по горизонтали элементы. Для корректной работы необходимо внутри нее использовать сетку col-[количество колонок, базово от 1 до 12].

Поэтому решения 2:
1. Убрать row из оберток, оставив только container*.
2. Вложить между контентом и row один див с классом col-12*.

* — и в любом случае поубирай отрицательные маржины. Они тебе тот еще подарок преподнесут ибо.

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

function myFunctionmat() {
    console.log('Hello');
}

document.addEventListener('keypress', (e) => {
    if (e.which == 13) {
      myFunctionmat();
    }
});

Дополню ответ azerphoenix.

Все иконки стоит обрабатывать вручную, так как:
1. В верстке они регулируются только по ширине. Да, можно задать условия выравнивания относительно друг-друга или захардкодить размеры, но чем дальше, тем сильнее сердце сжимает от костыльности решений. Базово это ширина. Следовательно, чтобы все они были +- на одной горизонтальной оси — их надо сделать одинаковой высоты и выровнять прямо в ФШ. Верстальщик, если это не ты, спасибо скажет.
2. Все иконки имеют разный визуальный вес и за счет масштабирования ты, как дизайнер, можешь привести их к единому знаменателю, опять же, вручную.

3. Их всех стоит загнать в сетку, к примеру на flex-ах, вместо того, чтобы прямо картинки в ряд выстраивать.

1. phpmyadmin → инструмент для работы с БД, визуальный.
2. Хранить можно в БД, с помощью любого ЯП. Запрос в гугле может выглядеть так: «как записать данные в бд php», но в целом это детский сад. По-хорошему стоит зацепиться за какой-нибудь ЯП и хотя бы каплю в нем развиться, чтобы такие условно элементарные вещи делать.
3. Можно хранить в файле, тут тоже потребуется ЯП и этот способ плох, но имеет место быть.

ЯП → язык программирования. HTML\CSS это не ЯП, выбирать необходимо среди таких, как, к примеру PHP, Python, JS (в стеке node.js).

first-of-type + класс + тег дадут необходимый результат.

По умолчанию они работают с типами и дочерними элементами. first-child → первый из всех, first-of-type первый из типа. Тип != класс, но = тег.

ЗЫ: но если у тебя класс генерируются автоматически, то:
1. Ты можешь из бэка передать дополнительный класс для подсветки, скажем, модификатор.
2. Сделать это на JS.

Магии не существует, но ближайший к реализации вариант → columns. Но он не умеет подстраиваться под ширину текста, в отличие от гридов, зато умеет в вертикальное заполнение по колонкам.

Так что тут одно из двух зол в общем-то. Или ждать еще лет 20, пока в спеке появится что-то подобное.

Элементы с позиционированием relative умеют в z-index.

Но вообще скорее всего у тебя просто кривая реализация, или некорректный вопрос, поэтому код на codepen.io в студию.

1. p — для набора параграфов, если это не он, то можно смело брать span.
2. Классы на p → идеально, исключением составляет пользовательский ввод.
3. Класс строго по БЭМ (ну почти).
4. Флексбоксами действительно не стоит бездумно злоупотреблять, так как всегда есть риск выстрелить себе в ногу.
5. PP → в макете стоит искать закономерности и их релизовывать, но проверять на переполнение, так как пользовательский ввод не дремлет.
6. position: absolut; → position: absolute;
7. Отступы всецело зависят от контекста, например если тебе надо сделать карточку с фоноцветом, то скорее всего ты применишь padding, дабы были отступы от краев.

Я придерживаюсь нескольких взглядов:
1. Все, что нарисовано может быть сверстано (и при этом хорошо, да)
2. Дизайнер должен понимать, вне зависимости от квалификации, базовые понятия переноса макета в верстку, т.е. в том числе многоколоночное построение. Как минимум для того, чтобы не быть обманутым фичами в редакторе (XD к примеру для мобилки выстраивает 4-колоночную сетку, что в общем неприемлимо для стандартного подхода неимзменяемого количества колонок на всех разрешениях).
3. Верстальщик должен уметь понимать дизайнера, его условности, чтобы как минимум донести мысль через аппарат бюрократии или просто напрямую.
4. Верстальщик в идеале должен иметь навык дизверстки.

При этом да, бюджет, в основном это:
1. Где-то нанятый недоучка\начинающий дизайнер, который просто срубил деньжат на скорую руку, а его клиент сэкономил. Он, логично, знать про все это еще не знает.
2. Вы работаете в одном офисе и можно подойти надавать по щам, да пояснить за жизнь.

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

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

ЗЫ: в работе я вообще достаточно радикализирован, например общаясь с заинтересованными дизайнерами, которые хотят меня сменить я всегда требую сверстать то, что они нарисовали. Всегда глаза по 5 копеек и поэтому у меня до сих пор нет штатного дизайнера.

А при работе с внешними дизайнера на подсосе (картинок наделать, например), всегда пишу подробные требования с иллюстрациями.

Можно загонять данные при сборке Gulp-ом. Библиотеку не помню только.
Но при беглом гуглении нашел вот это.

В режиме же реального времени прорисовки браузером никак.