Как растянуть один grid-div на всю ширину?

CHtommy,

upd: и да, как вы поняли, что он просто стоит справа?

Попробуйте представить, что дизайнеру пришло в голову задать фон или рамку правому элементу. Будет это логично выглядеть, если блок будет растянут на всё свободное пространство? А если он будет прибит к правому краю?

Почему шрифт не становится жирным на айфоне?

DaniilPo, опять же скрин нечеткий, поэтому сложно понять что именно происходит с шрифтом. Но по тому что можно разглядеть, кажется, что жирность там присутствует.
Возможно, дело в нецелых размерах шрифта.
Можно пробовать -webkit-font-smoothing: antialiased (или наоборот отключить, если стоит и проверить)
https://habr.com/ru/post/122269/

Почему шрифт не становится жирным на айфоне?

DaniilPo, в этих стилях нет свойств font-family и font-weight.
Больше того, в них есть opacity: 0;, так что удивительно, что они вообще где-то отображаются.

Почему шрифт не становится жирным на айфоне?

DaniilPo, вы показали только подключение шрифтов. А стилей не показали.
А еще лучше песочницу.
И скрин с айфона в нормальном качестве сделайте, пожалуйста.

Почему вендорные префиксы псевдокласса ломают стили и как это обойти если используется CSSO?

Напишите в настройках CSSO запрет на объединение.

Как поменять значение Руб?

Писать !important в своем коде это моветон.
Без него отметила бы решением.

Как поменять значение Руб?

Задайте для .item-meta display: flex, а для .price span задайте order: 1

Как растянуть один grid-div на всю ширину?

1. Прочитайте про grid-template-columns и его возможные значения.
2. Прочитайте про единицы fr

Либо используйте флекс и margin-left auto, учитывая, что судя по скрину вам нужно, чтобы блок был справа, а вовсе не растянулся на всю ширину.

Здравствуйте. Как можно реализовать сценарий, когда наводя курсор на кнопку у картинки сверху появлялся background определенного цвета?

htmlbook.ru/samcss/kontekstnye-selektory и дальше по оглавлению.
За наведение отвечает псевдокласс :hover

Как лучше реализовать такую фигуру?

clip-path

Как лучше центрировать фиксированный контент внутри блока?

What have you done, да без разницы.
Только нужно точно быть уверенным, что там вообще нужно столько оберток.
Но по вашему описанию этого не понять.

Как лучше центрировать фиксированный контент внутри блока?

Можете объяснить, почему не хотите использовать свойства флекса раз уж родитель флекс?

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

Сделайте песочницу, чтобы было видно, что вы ставите ширину 100% и вообще всю проблему.

Как стилизовать маску отдельно от велью инпута?

Можно как-нибудь попробовать на базе этого https://jsfiddle.net/Ankhena/5jecmvw0/
С моноширным шрифтом легко. С немоноширным как-то вычислять точку перехода градиента.

Как изменить класс элемента при прокрутке страницы?

Илья Деревянных,
при скролле страницы чтоль?

Как изменить класс элемента при прокрутке страницы на 50 (условно) px?
Если да, то так и гуглите.

Как изменить класс элемента при прокрутке страницы?

От начала чего?

За внешние отступы отвечает свойство margin.

Как правильно указать размеры картинки в swiper slider?

cracker-test, нужно открыть справочник https://developer.mozilla.org/ru/docs/Web/CSS/back... и выбрать подходящее значение. Я не знаю, какое вам нужно, потому что вы не рассказали как именно она должна подстраиваться.

Как правильно указать размеры картинки в swiper slider?

Размер фоновой картинки регулируется свойством background-size.

Когда я указываю высоту и ширину картинки 100%

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

Соответственно, вам нужно определиться, что от чего зависит. Блок от картинки, картинка от блока или они вместе от размеров слайдера или от каких-то пропорций и т.д. В общем, самая простая геометрия.
А потом всё это записать в CSS.

Как правильно формулировать классы по бэм?

https://ru.bem.info/methodology/redefinition-levels/

Как правильно писать css c помощью sass по БЭМ?

и там мне очень понравилась вложенность, везде ее лепил то-есть структура css у меня получилась такая же как и в html

Так делать не стоит ни в CSS ни в препроцессорах.
Большая вложенность приводит к повышению специфичности, а значит, к потенциальным проблемам при переопределениях.
БЭМ как раз заметно сокращает потребность во вложенностях.
Если у вас есть элемент .block__elem, то уже и так понятно, что он лежит в блоке .block и больше нигде.
Это #details-bouncy #details-bouncy-markers div, конечно жестоко. Вы попросили браузер найти сначала все div на странице, потом проверить лежат ли они в #details-bouncy-markers. Это уже не лучший ход. Так потом ещё нужно пойти выше по дереву и проверить, лежит ли это всё в #details-bouncy.
Вместо этого можно было бы задать одинаковый класс этим div и использовать простой селектор типа .class {}. Ну или в БЭМ версии .block__elem {}
Ну кроме того, что эти картинки вообще не контентные, а украшения. А украшения делают фонами и/или псевдоэлементами с помощью стилей.

так же я использовал очень много id что тоже не верно?

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

p.s.
1. Вы смотрели свой сайт при ширине окна больше макетной? Есть прелюбопытные моменты.
2. Высоту в верстке задают очень редко. Мы никогда не знаем сколько будет контента. Используйте отступы и/или мин макс высоту, если она зачем-то нужна.
3. Не забывайте проверять код валидатором.
4. <h2>O U R&nbsp;&nbsp;&nbsp;S E R V I C E S</h2>
В разметке текст хорошо бы писать так, чтобы его нормально могли прочитать экранные дикторы. Представьте, как может быть прочитан вот этот.
Для увеличения расстояния между буквами есть свойство letter-spacing.
5. Ну и т.д. про семантику, контентные картинки и украшения, лишние теги... Хватит пока.

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