Не работает col offset, в чем причина?

В чем проблема, почему колонки никак не реагируют на отступы?

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

У меня работают
https://codepen.io/AnnaSummer/pen/JjZROOx

На будущее: делайте песочницы, в которых видно проблему.
Во-первых, пока делаете, 80% начальных проблем решится.
Во-вторых, мы быстрее поймем в чем дело.

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

Михаил Flat, надо объяснять? Хорошо.

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

Но с таким кодом нет никакой гарантии, что так будет всюду и всегда, пока не будет включено в спеку (да и потом, как вы, наверное, знаете, не факт)

Также нет гарантии, что это навсегда останется в коде, что другой разработчик или даже линтер не исправит ошибку.

Я не возражаю против костылей в принципе.
Но псевдо элементарно переставляется в label (или в span, при желании оборачивать инпут в лейбл) и не вызывает никаких проблем.

А ещё, часто вопросы тут задают новички, которые несут этот код прямиком в портфолио и на собеседование. Чем сразу снижают себе баллы.

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

frontAng, пишите свой, раз чужие не подходят. Что ещё сказать...

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

frontAng, эмммм..
Может, погуглите?
А то как-то неловко.

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

frontAng, как это понять из вопроса? На скрине они явно одинаковые. А с запятыми и формулировками в комментариях вы не очень дружны.

Тогда вам помогут плагинчики типа masonry.
Либо css columns, если устроит порядок расположения элементов по столбцам.

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

frontAng, так ради бога.
Без сдвига можете сделать с одинаковой высотой?
Потом сделайте сдвиг.

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

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, чтобы, наоборот, был принудительный перенос.