hellcaster

body {
 background-image: linear-gradient(to right, green 0%, green 50%, white 50%, white 100%);
} /*а дальше самим блокам задаем background*/

Сделайте через display: flex и justify-content: space-around

let allElem = document.querySelectorAll("*[data-category='white-wine']")
Должно сработать

Взять flexbox, mobile first, побольше денег с заказчика и с радостью в глазах делать. Больше нет вариантов

.logo {
  display: block;
  color: #222222;
  font-family: sans-serif;
  font-size: 27px;
  font-weight: 300;
  line-height: 32px;
  font-weight: 300;
  letter-spacing: 0.68px;
}/*Скобку пропустили*/
.logo span {
  color: #f16d7f;
font-weight: 400;
letter-spacing: 0.68px;
}

let img = document.querySelectorAll("img");
for (var i = 0; i < img.length; i++) {
img[i].src = "img/new.jpg";
}
Все что я могу сказать по описанию

Проблема не в rgb Can I use (rgb), но купертиновцы перестали выпускать Safari на Windows еще давным-давно (последняя версия 5.1.7) и это прям очень старая версия (самая новая 11.1.2), поэтому проверять стоит прямо на продукции Apple

input[type=checkbox]: checked ~ .main-block > .block1{}
input[type=checkbox]: checked ~ .main-block > .block2{}
input[type=checkbox]: checked ~ .main-block > .block3 {}

Почитайте про em и rem.

../ указывает на уровень выше. То есть у Вас есть папка с проектом с названием YouTube (просто к примеру). В ней у вас есть 2 папки - сss и fonts. Если Вы укажите из CSS файла, который находится в папке css путь ../fonts/Roboto. woff2, то Вы подниметесь в папку YouTube, затем в папку fonts, а потом к шрифту. И этого Вам достаточно. Когда Вы будете заливать на хостинг, то у Вас там будем такая же папочка YouTube и в ней Ваши файли

"Мелкая правка 200 рублей, большая - 500р." Эту фразу нужно сказать заказчику перед началом роботи

Проблему вырешил через opacity к img

Добавляются стиль к элементу при наведении

Всем спасибо, я уже нашел ответ. Для тех, кто ищет ответ, то нужно установить версию 2.3.3 Ruby