Как расположить объекты в div в строчку?

В комментариях к вот этому вопросу Почему не применяются падинги? я показывала как это сделать. Ведь иконка это не img, а вместо div по логике должна быть ссылка.

Зачем вот это white-space: nowrap; внутри картинки вообще загадка. Как вы себе представляете переносы текста внутри картинки?

Как изменить цвет svg заливки?

1. Почитайте про <use>, в том числе и прямо в svg. Нет смысла дублировать один и тот же градиент 1000 раз. Да и сами сердечки тоже.

2. Почитайте про css свойство mask. А в качестве bg задавайте градиент.

Почему фоновая картинка то пропадает, то появляется?

У меня почему то фоновая картинка у карточек в самом низу сайта то пропадают, то появляются

Просто при обновлении страницы то есть, то нет?

Или если по разному открывать сайт, например, локально и с хостинга?

Во втором случае: неверный путь к картинке.
В первом, я бы посмотрела на размер, если очень большая, может не всегда успевает подгрузиться.

Если всё не так, то нужны подробности.

Почему появляется горизонтальный скролл при использовании grid?

Там масштаб 70%
Можно попробовать закрыть адаптивный режим, обновить страницу, и открыть обратно.
Всё таки девтулзы частенько подглючивают, особенно при изменении размера/масштаба.

Дополню:
1. Задавать max-width 100% для адаптивных картинок - хорошая практика
2. Оборачивать адаптивные картинки в div (или в ссылку или в figure и т.д.) и использовать object-fit тоже хорошая практика.
Сама ячейка грида может выступать такой оберткой, в которую встраивают картинку, но это не всегда удобно.
3. Сетку лучше делать не в px, а в относительных единицах измерения.

Как реализовать звездный рейтинг с частичным закрашиванием звезд?

djok2142,
я же написала выше, используйте градиент для текста и закрашивайте сколько вам хочется

Как реализовать звездный рейтинг с частичным закрашиванием звезд?

djok2142,

Искал, нету.

Не знаю как комментировать.
Вот первая попавшаяся реализация
https://codepen.io/Sadorus/pen/XjQKqg

Но вообще, можете и к шрифтовым звездам применить градиент для текста.

Как реализовать звездный рейтинг с частичным закрашиванием звезд?

Поищите на codepen.io, там полно вариантов на любой вкус

Почему элемент с шириной fit-content и ограничением max-width: 100% выходит пределы экрана?

Встречный вопрос: а куда ему деваться? Переносов в "слове" нет, принудительных вы не сделали, как переносить автоматом не сказали. Вот он и вываливается.

Почему высота span не такая как у родителя при height:100%?

1. jsfiddle не работает в России. Переложите на codepen.io, если хочется, чтобы мы посмотрели.
2. В приложенном к вопросу коде вообще нет ничего с чего бы спан стал как label и нет ничего с чего бы все label были бы одинаковыми. (label могли бы, если бы вы перестали задавать им высоту)

Выводы:
- Убрать вертикальное центрирование у holder.
- Убрать высоту у label
- Задать высоту 100% для span
- Задать центрирование для span

Что не так с кодом?

Fasolll, дальше..
Стратегия может быть разной.
Я бы, всё таки потратила бы некоторое время на изучение основ. Чтобы получить представление о том, какие теги, атрибуты и свойства вообще есть и что они делают.
А потом, разбивая задачу на мелкие, гуглила бы при необходимости.

Что не так с кодом?

Fasolll, дальше можно/нужно поменять div на список. Т.е. div поменять на li и всё обернуть в ul.
Списку задать flex или grid и width: fit-content
Будет ровнее.

Что не так с кодом?

Fasolll,

при том в браузере хром все хорошо работало

Угу
Если вы в том окне хрома сделаете масштаб 100%, то тоже останется только фон.

Что не так с кодом?

Fasolll, сделайте вот что:

1. Уберите всюду position: fixed и координаты left и top
2. У html и body уберите размеры
3. Для body задайте

body {
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

4. Уменьшите размер шрифта до приличных размеров

В браузере поставьте масштаб 100% (можно с помощью сочетания кнопок Ctrl + 0)

Да, всё встанет не совсем так, как вам хочется, иконки не будут друг под другом, но это уже отдельная история.
Это будет первым шагом к нормальному отображению.

А дальше придется пойти изучать теги, атрибуты, свойства и т.д.

Что не так с кодом?

Fasolll, всё у вас там скорее всего отображается... просто за краями окна браузера.
Нажмите несколько раз на ctrl + - до тех пора пока не увидите свои ссылки.

Вы пишете фиксированным элементам left 2100px
Если ширина окна браузера будет больше, то увидите и так...

Ну и вниз тоже очень много.

Уберите все position: fixed

Почитайте основы верстки, про поток документа, флексы, гриды и т.д.
Про флексы я вам уже в прошлый раз писала и даже пример показывала, но вы проигнорировали..
Полно видео на ютубе или тренажерчики от HTML Academy

Как подогнать ширину блока внутри flex под контент?

Немножко вам может помочь
flex-basis: 0; в сочетании с flex-grow: 1;

При некоторых раскладах посимпатичнее будет с text-wrap: balance, но пока без Safari (но и ничего не сломает)

А так, это особенности текста. (br, js)

p.s. уже нет смысла в использовании костыля с отрицательными margin для флекс-контейнера. Прекрасно работает gap

Проверка элемента в другом элементе в js?

Axel030392, и гораздо удобнее скрывать элементы через класс, а не напрямую через style. Точнее, скрывать ещё куда ни шло, а вот возвращать совсем неудобно.

А ещё логичнее сразу не добавлять, то чего не должно быть.

Проверка элемента в другом элементе в js?

Axel030392, конечно, не хочет.
Условие из цикла вывалилось и не знает у кого проверять.

Проверка элемента в другом элементе в js?

Axel030392, ищем "размер", если пустой, скрываем предка .meta_wc. Вроде всё, что нужно сделать.

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

Почему игнорируется display:flex после билда?

UthvfyV,

что за бред вы пишите?

Бред это вот это:

display: flex вообще использовать не надо, это неофициальный display, у него и после него много ошибок выходит.

просто зашкаливающий

Почему не применяются падинги?

<a class="social-link" href="https://www.instagram.com/zjedn.oczeni?utm_source=ig_web_button_share_sheet&igsh=OGQ5ZDc2ODk2ZA==" aria-label="Наш аккаунт в Инстаграме">
        @zjedn.oczeni
      </a>

.social-link {
  display: flex;
  column-gap: 1em; /* ваш отступ */
}

.social-link {
  content: "";
  flex-shrink: 0;
  display: inline-block;
  width: 1em; /* ваши размеры */
  aspect-ratio: 1;
  background: url("../img/inst.png") no-repeat center/ contain; /* путь к картинке скорректируйте и в идеале найти картинку в svg */
}

Как-то так.
Без div, p и прочего барахла.

Иконка инстаграма - не контентное изображение, а украшение ссылки. Его лучше убирать в стили. Я показала один из вариантов как именно.

Почему не применяются падинги?

Судя по скрину они как раз таки применяются. И именно из-за них такая дичь и происходит.
Если пока не очень хорошо пользуетесь инструментами разработчика, я рекомендую обводить элементы рамочками (outline и отрицательный outline-offset). Удобно толстенькими разноцветными и полупрозрачными.