Почему не работает :first-child с SCSS (SASS)?

MaksSmag,

Возможно вы правы, зачем я от такой привычки отказался.

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

Кстати, если перестанете использовать id для стилизации и использовать большую вложенность селекторов, то тоже будет легче.

какая разница между nth-of-type и nth-child

Разница прямо в названии свойства.
Один считает детей, другой детей указанного типа. Причем в любом из случаев есть нюансы в зависимости от селектора.

Прекрасная статья с примерами css.yoksel.ru/nth-child

Почему не работает :first-child с SCSS (SASS)?

MaksSmag,
Все будет проще, если вспомнить про семантику и изменить разметку.

Меню это тег nav, в котором лежит ul состоящий из пунктов меню.
Лого при этом может быть внутри nav или отдельно, но не внутри списка.

После этого вы задает отступ списку и получаете надежное решение.

Почему не работает :first-child с SCSS (SASS)?

По понятным причинам (отсутствия компилятора SCSS) выкладываю код и текущий результат сюда

Нет таких причин.
Всегда можно выложить уже скомпилированный CSS.
Или воспользоваться песочницами. Например, codepen.io и jsfiddle.net умеют и SASS и SCSS.

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

anvarik2, переписать их так, чтобы сайт выглядел так, как вам хочется.
У меня, кстати, не прыгает. Или вы уже успели поправить.

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

При зуме изменяется размер вьюпорта и применяются соответствующие правила из media условий.

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

Enkei1, overflow для ближайшего родителя изображения у которого ограничена ширина.

Как узнать с каких устройств больше отказов?

Зайти в Отказы, сгруппировать по устройствам.

Как сверстать необычную фигуру в макете?

Максим Иванов, в 6 вариантах для разных экранов? ;)

Я бы даже не стала предлагать это как вариант.

Как сверстать необычную фигуру в макете?

Треугольник в png? В современном мире?

Как вставить блок с html внутрь svg?

Если нет анимации или эффектов при наведении/нажатии, то svg отправить в псевдоэлемент.
Если есть, то в спрайт.

<br> достаточно писать так и тексту добавить семантики и будет норм.

Почему в мобильной версии фон блока не до конца?

Да там особо не над чем гадать.
Люди из команды не поместились в серый блок. Забыт flex-wrap или неверные размеры.

Посчитаете правильно, уйдет полоса прокрутки и фон встанет на место.

Как сверстать необычную фигуру в макете?

Хотите псевдоэлементом, хотите просто множественным фоном (градиентом или svg)

Фиксированный текст?

bbbbb123654,

1. Тег font помер уже заметно давно.
2. Почему вы пункты меню делаете заголовками?

Например, гридами https://jsfiddle.net/wu2anzbj/

Но если там действительно меню, то лучше как-нибудь так https://jsfiddle.net/pjryu4oh/

Как сделать такой градиент?

intriga93, конечно не получится. На картинке радиальный градиент, а вы пишете линейный.

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

Dmitriy Uvin, я даже песочницу уже прикрепила.
Либо блочность, тогда ссылка займет всю ширину родителя либо инлайн-блок и ширину.

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

Dmitriy Uvin, для того, чей текст надо обрезать...

Фиксированный текст?

bbbbb123654, и как нам узнать где вы его задали и как узнать почему он там не держится?

Нарисуйте картинки как должно быть.
Сделайте песочницу с тем, что не вышло.

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

Dmitriy Uvin, ну или блочность хотя бы
https://jsfiddle.net/rh2cy67t/

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

не вылазил за ширину блока

И где ширина-то?

Фиксированный текст?

Уточните в чем именно проблема и как вы хотите его адаптировать?
И желательно песочницу с вашими попытками.