Как сделать нестандартную раскладку?

frontAng, хоть флексами хоть гридами и сдвиг марджином или трансформом для nth-child.
Там все ответы об этом.

Как мне сделать такую же форму, как на этой картинке для сортировки зданий?

input одиночный тег у него нет закрывающего тега и псевдоэлементов тоже.

Почему при заливе на хостинг текст плывет и видео не грузит?

htmlcssnoob1, пробуйте до тех пор, пока они не станут одинаковыми.
Ещё бы желательно без кириллицы...

Почему при заливе на хостинг текст плывет и видео не грузит?

1. Код нужно проверять валидатором (дело не в нем, но ошибки хорошо бы исправить).

2. Посмотрите на регистр букв в папке и в коде. Сравните. Исправьте.

Как правильно по бему обращаться к классу элемента scss внутри модификатора?

godsplane, по-моему, тоже.
Но вы спросили, я рассказала.

Source map не работает, например, после группировки media. Да и толку от него, ну сказалон мне, что .block__item находится в файле block.scss или в каком-то ещё.
Нужно сначала открыть это файл и в нем искать __item, который там может быть и не один. Хорошо, если проект всё таки нормально разбит на блоки, а не так, как мне тут недавно попалось...

Вместо того чтобы просто найти этот селектор в одно телодвижение.

Но дело ваше.

Как сделать, чтобы картинка не обрезалась?

frontAng, не понятно, как эта svg связана с текущим вопросом.

подскажете почему свг не адаптивна?

С чего бы ей быть адаптивной?
У вас нет ни одного свойства или атрибута исходя из которых она была бы адаптивной. Причем отсутствует даже viewbox.

Укажите viewbox и что-нибудь типа width 100% и height auto. Или как вам нужно чтобы она адаптировалась.

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

Genri_Rus, гридами...

Уже таблица тут не подойдёт?

Пары dt и dd можно оборачивать в div.

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

Genri_Rus, да, именно так

Как работает свойство flex-basis?

torbach, обратите внимание, что при этом оси нельзя называть вертикальной и горизонтальной.
Из названия остаются: main (главная) и cross (поперечная).
И flex-direction меняет направление главной оси.

Как работает свойство flex-basis?

torbach,

А flex-basis тогда для чего нужен?

Это базовый размер вдоль главной оси флексбокса.
Т.е. если главная ось идет по горизонтали, то это ширина.
А если мы повернули главную ось (с помощью flex-direction) и ось теперь стала вертикальной, то размер вдоль неё стал высотой.

Это может быть нужно, например, при смене ориентации дисплея.

Если вам в любых условиях нужна именно ширина, то используйте width.

Что делаю не так, проблема с json в gulp-file-include?

Zold09, ну проверили так проверили.. значит, должно работать :)

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

Genri_Rus,
1. Список определений это один список, а не три, как у вас.
2. В коде пишете 10 border-spacing: 10px 20px;, а на словах говорите что вам нужен горизонтальный 20px
3. Для dt вы пишете сначала table-cell, потом inline-block (правда, не срабатывающий из-за специфичности). Хорошо бы определиться.
4. .list__item dt, dd странный селектор.
dt берете только те, которые внутри .list__item, а dd все. Как-так? С чего такая логика?
И ниже всё равно обращаетесь к ним по классу, так зачем выше по тегам?
Вам бы разобраться с этой кашей.

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

Тогда не ясно чем вам не нравится white-space

Что делаю не так, проблема с json в gulp-file-include?

Я не вижу ошибок в том коде, который вы показали.

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

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

Genri_Rus, нет, нельзя.
Тексы ведут себя именно так.
Можно навставлять br, чтобы, наоборот, был принудительный перенос.

Почему в input padding выходит за margin?

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

Видимо прямого решения этой проблемы нет...

Вроде выше есть целых два достаточно прямых решения.

Как сделать, чтобы картинка не обрезалась?

frontAng, как успехи с рисованием примера?

Почему в input padding выходит за margin?

И инпута есть ширина по умолчанию. А не auto, как обычно.
Соответственно, если вы зададите max-width: 100% это не поможет, потому что это даст ширину родителя.

А значит, нужно действовать по-другому, например, либо использовать calc либо задать padding родителю вместо margin инпуту.

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

Genri_Rus, значит, нужно поспать и утром найти ошибку.

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

Genri_Rus, погуглите как устроены таблицы: снаружи таблица, в ней строки, а в них ячейки.
Есть ещё всякие волшебные вещи типа thead, col,и т.д. но их опустим, нам они не нужны сейчас.
ul - таблица
li - строка
span - ячейка.

Не хотите использовать dl (почему, кстати?), то хотя бы замените два span, на заголовок и параграф? Ну чтобы хоть как-то семантика была похожа на семантику.

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

Genri_Rus, без этих тегов на гридах получится, только когда нормально приедет subgrid.
С li можно использовать display table и тд.

С dl просто гридом.