Как задать border-bottom на всю ширину с overflow?

Не вижу в песочнице нижнего бордера.

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

Почему на ссылке не работает max-width?

С тем кодом, который вы выложили ссылка имеет ширину 43px (ширина иконки + границы).
Куда и как она должна уменьшаться?

Сделайте песочницу на codepen.io с видимой проблемой и опишите желаемое поведение.

Как сделать что-бы ссылка масштабировалась по ширине при уменьшении вьюпорта браузера?
когда ставлю max-width, все ломается...

max-width это максимальная ширина и не очень понятно, какое отношение это свойство должно иметь к уменьшению размера по вашей версии.

Почему грид контейнер использует неправильную ширину себя при overflow?

godsplane, overflow auto для grid

Почему грид контейнер использует неправильную ширину себя при overflow?

Блочные элементы по умолчанию занимают доступную ширину родителя.
Поэтому .grid закончился там, где закончился родитель.
То что в него не поместилось - выпало.

Если я добавлю какой-нибудь width:fit-content к контейнеру, то все будет окей

Прекрасное решение.
Чем оно вас не устраивает?

Есть ли варианты адаптации этого блока кроме создания отдельного для мобилки?

godsplane, попробуйте почитать дальше...
Для ваших целей у него поддержка не хуже гридов.

Как по числу определить начало недели?

Ilya Kuminov, ай, молодец)))

Как по числу определить начало недели?

Так

Есть ли варианты адаптации этого блока кроме создания отдельного для мобилки?

display: contents в помощь

Почему свойство min-height со значением min-content игнорируется?

imko, на коленке, куда-то туда https://codepen.io/AnnaSummer/pen/mdjdyGj

Как сверстать такие линии на css, которые будут соединять блоки?

FlateGG, ну и прекрасно, чем вас этот вариант не устраивает?

Как сверстать такие линии на css, которые будут соединять блоки?

Псевдоэлементами.
SVG.
Что именно вы пробовали, что не получилось и что вызывает сложности?

Почему свойство min-height со значением min-content игнорируется?

imko, прекрасный план. А если поменять в конце высоту на auto по этому же плану?

Почему свойство min-height со значением min-content игнорируется?

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

Зачем задавать свойства непригодные для решения задачи, а потом удивляться, что они работают не так?

Не работает npm init в терминале web storm. Как исправить?

А что, не в WebStorm работает?

Обычно это значит, что вы либо забыли установить Node.js вообще либо иногда нужно перезагрузить терминал/комп.

Как игнорировать ошибки компиляции свойств grid из scss в css?

Ваш редактор не понимает свойств для грида с префиксами -ms и вы всерьез считаете, что это проблема грида, css и scss?
Разумнее поставить к вопросу тег VS Code, а остальные стереть.
А ещё лучше писать это Микрософту.
Только в данном случае, я думаю, что ответ будет чем-то вроде "ИЕ ушел и учить редактор понимать какие-то допотопные костыли не имеет смысла"

Короче, если вам нужна поддержка гридов в ИЕ, не смотрите на подчеркивания.

Swiper: как збросить дефолтные настройки на стрелках навигации?

захожу в инспектор вижу что мои стили все ровно перебивают те что заданы по умолчанию

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

Ну и !important, если совсем беда с версткой.

Как сделать так, чтобы кнопка не растягивалась?

Если зададите фон ссылке, то убедитесь, что она и не растягивается...

Рамка у вас задана для обертки.
И отсюда вопрос: зачем вообще эта обертка?

Ещё вы пытаетесь задать верхний margin инлайновому элементу. Так не работает.

Как спозиционировать относительно фона, чтобы избежать смещения при уменьшении ширины?

но мне кажется каким-то костыльным

Ну да.

Есть ли более красивый и чистый способ?

Посчитать положение точки нормально, с учетом размера самого маркера и положения его центра.
Обычно в этом помогает transform. (Вспомните, как вы центрируете элементы абсолютами)

Как сделать нижнее подчеркивание ссылки намного ниже?

1. nav - это основная навигация по странице. Внутри nav хорошо бы сделать список, а уже в нем ссылки.
2. Опустить бордер = увеличить расстояние между границей и текстом = padding
3. Либо использовать псевдоэлемент, а не бордер. Тут зависит от того, какая область клика вам нужна.
4.

и сделать данную ссылку активной

Скорее активная это не :active, а та, которая указывает на текущую страницу.
Т.е. либо дополнительный класс либо aria-current="page" и селектор по атрибуту.
5.

Но проблема в том что opacity все перебивает

Либо убирайте при наведении и у активной либо задавайте цвета через rgba
6.

И еще к тому же icon__search не меняет своего цвета.

Было бы удивительно, если бы цвет png картинки менялся свойством color.
Но также удивительно, почему эта лупа не svg. Как только она станет svg она сможет меняться через свойство color, если в самой svg fill будет задан как currentColor.
Есть и другой вариант: убрать лупу из разметки (вообще прекрасно) и вставить как mask (не забудьте префиксы) в css и менять цвет через background-color.

p.s. Про свойство text-underline-offset. С виду кажется, что оно может помочь, но если пункт меню будет в две строки - линии тоже будет две.

Как указать главную кнопку submit?

Павел,

Можно конечно, но вот хочу решить по другому.

Явные симптомы нарушения логики в форме.
Но всю задачу мы не знаем, поэтому только так.