Как добавить паддинг от блока во флекс контейнере сохранив одинаковую ширину?

godsplane,

И почему на 4к места не останется если его станет больше?

максимальная ширина красного блока 1200.
Левый magrin от края окна до левого края блока 1200.
Размер окна растет => размер отступа растет.
Но вы же хотите чтобы справа был отступ такого же размера...

На 3000 отступ будет 900, два отступа 1800.
Всего левый блок занимает половину ширины (отступ между блоками опустим для простоты) = 1500.
Из которых 1800 ушло на отступы.

а calc то на основе чего?

На основе ширины в %, половины ширины красного контейнера и gap.

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

Andrew Ruwz, вы можете менять bg size.
Можете задать фон псевдоэлементу, а ему уже transform.

Как добавить паддинг от блока во флекс контейнере сохранив одинаковую ширину?

godsplane, ну и поставьте два одинаковых margin для block__inner (через calc).

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

Как добавить паддинг от блока во флекс контейнере сохранив одинаковую ширину?

godsplane, давайте вы покажете на скринах и расскажете исходную задачу, а не какие-то производные от неё.

Потому что сейчас .margin__container имеет левый отступ calc(50% - var(--container-width) / 2)
Вы хотите задать ему же правый паддинг равный этому margin, но пишете 100px.

Это https://codepen.io/Websitio/pen/poyemJv вы чтоль изобретаете?

Как добавить паддинг от блока во флекс контейнере сохранив одинаковую ширину?

godsplane,

или как сохранить оступ = оступу в у контейнера в гридах?

я не смогла расшифровать это

Текст под текстом в css?

ivangerasimov00, если не жалко трафик пользователей и охота писать кучу лишнего, то норм.
А про семантику всё таки лучше почитать.

Как добавить паддинг от блока во флекс контейнере сохранив одинаковую ширину?

Как сохранить шиирну по 50% не задавая эту самую ширину в 50%

Задайте flex-basis, если не хотите ширину.

А вообще гридами это делается заметно проще. И не нужна та история с margin.

Текст под текстом в css?

ivangerasimov00, оберните текст и числа в span.
Задайте им display block и text-align по центру.
А также другие свойства шрифта, нужные по макету.

Разметку хорошо бы поменять на dl, dt, dd или table или список.

P. S. Но имеет смысл нанять верстальщика, потому что этот вопрос примерно по первым двум урокам верстки.

Текст под текстом в css?

Попробуйте убрать флекс у item и заменить на всего лишь одно свойство text-align: center
Будет сюрприз.

Текст под текстом в css?

Сделайте песочницу на codepen.io с вашими попытками. Что вы делали и что именно не получилось?
И приложите скрин того, как должно быть.

По дороге можно заглянуть сюда

Зафиксировать after/before в блоке?

Обернуть в div и задать ему relative.
Relative у code убрать.

Как заставить работать CSS:Hover при прокрутке Slick Slider?

Ivseti, всё, последний штрих
замените
a.btn_add_basket:hover:before
на
a.btn_add_basket:hover::before

С одним : устаревшая форма записи.
Псевдоклассы пишутся с :, а псевдоэлементы с ::

Как заставить работать CSS:Hover при прокрутке Slick Slider?

Ivseti,

почему background-color

Потому что так работают маски. Через маску вы видите фон.

и сделал так:
html: <div class="icon icon_basket"></div>

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

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

Глеб, https://qna.habr.com/q/730955

Как заставить работать CSS:Hover при прокрутке Slick Slider?

Ivseti, id не могут дублироваться в рамках одной страницы.

p.s.
Уберите цвет stroke из разметки или используйте currentColor, хоть поудобнее будет.

p.p.s.
И зачем вы дублируете код SVG столько раз? Прочитайте про <use> и переиспользуйте.
Или вынесите иконку в css. Псевдоэлементом и масками. Зачем она вам в разметке?
https://codepen.io/noahblon/post/coloring-svgs-in-...

Почему у меня не отображается половина сайта, если я его запускаю не через VS code?

Скорее всего неверные пути к файлам.
Смотрите ошибки на вкладке Console в инструментах разработчика.
Если это так, то читайте https://htmlacademy.ru/blog/articles/links

Если нет, то придётся показать ссылку на сайт. Можно использовать Github Pages.

Почему кнопка приобретает высоту?

Ошибка при компиляции, npm?

https://sass-lang.com/blog/libsass-is-deprecated
https://sass-lang.com/dart-sass

Как правильно создавать css файлы?

грамотные специалисты к каждой html-странице, да даже к каждому html-блоку добавляют свой css файл

Может быть вы всё таки имеете в виду препроцессорные файлы (scss, less и т.д.), а не css?

Зачем добавлять for к label?

MDN

НО если убрать эти теги, то код все равно будет прекрасно работать.

Не очень понятно, что вы подразумеваете "под убрать эти теги".

Если вы уберете атрибут и оставите разметку как есть, то работать ничего не будет.
Работать оно будет только если input окажется внутри label. Да и то, MDN рекомендует и в этом случае использовать связку по for-id для некоторых читалок.