Почему не убирается скролл?

Vova135798, без понятия. Это getScrollbarWidth что?
Смотрите, что выдаете консоль для этого body.style.marginRight

Как перестроить блок?

vikas_web, например, так https://jsfiddle.net/La6rdy4g/
Но я не знаю, что в макете и как оно должно себя вести при переполнении.
Другой вариант: вы можете делать пустые столбцы для отступов между 1-2 и 2-3.

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

Григорий, для мобилки и флекс не нужен, разве что для gap.

Почему не убирается скролл?

Vova135798, это очень легко гуглится

Как перестроить блок?

vikas_web, вы можете выбрать любой вариант, хоть абсолют+js.
Но гридами это решается проще и логичнее всего.

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

Pavel-ww, для этой задачи баги несущественны.

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

Григорий, у вас даже скрина десктопного нет.
Но попробую догадаться.

Да, пока нет subgrid придется выкручиваться. Один из способов, которым я это делаю это display: contents. Так на десктопе данные снова "рассыпятся".

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

Если вы не забудете сделать доступно скрытое текстовое описание для тех, кто эти звездочки не видит, то да, корректно. Гуглите "паттерн visually-hidden"
Но я бы не стала задавать ширину, если вы вставляете звезды шрифтом через content. Если бы фоном, то да.

https://jsfiddle.net/nzwdphc9/

Как расположить блок внутри flex бокса по центру?

Как сделать так чтобы блок с меню находился по центру СТРАНИЦЫ ?

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

Лого и лого-подпись это скорее одна сущность и может быть объединена общей оберткой. Так и логичнее и удобнее.

Более удобная, на мой взгляд, альтернатива это гриды.
Типа 1fr min-content 1fr

Почему не убирается скролл?

Vova135798, да, на js узнать ширину скролла и добавлять её куда-нибудь, типа в padding для body, как кастомное свойство.

Как передать данные товара в popup?

Никита, в том, что в первом случае, у вас будет получаться всегда картинка из первого блока. А во втором из текущего.

Алексей Алексеев да, лучше

Как передать данные товара в popup?

Вам нужно сначала получить src от текущего изображения.

$('#product-btn .popup-content').html('<img src="'+$(this).attr('src')+'" />');

- тут this это кнопка на которую кликнули, а у неё нет атрибута src.
Ну хотя бы так

$('#product-btn .popup-content').html('<img src="'+$('.card-img img').attr('src')+'" />');

Можно добавить резиновую вёрстку к адаптивной на действующем сайте?

Alyona_IM,

В моём представлении проблема решается (должна решаться) использованием в CSS относительных единиц, типа %, em или rem, но, думается, что это - обманчивое предположение.

Нет, не очень обманчивое.
Но не только в единицах измерения дело.

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

Как создать горизонтальный скроллбар?

Так

Можно добавить резиновую вёрстку к адаптивной на действующем сайте?

Alyona_IM,

Но возможности сделать это нет, поэтому подскажите, есть ли другие варианты решения этой проблемы в рамках уже свёрстанного и действующего сайта?

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

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

Можно ли резиновую и адаптивную вёрстки "совместить"?

Это понятия уже некоторое время назад слились в одно.

В чём же общая проблема вёрстки, что, например, у нас хедер при уменьшении ширины выстраивается в несколько строк, в то время как мы отчаянно хотим, чтобы он просто пропорционально уменьшался?

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

Нам отвечают: дайте макет на меньшую ширину, и мы сделаем.

А они это кто?

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

Я не смогла воспроизвести проблему чтобы круги стали разными. По всем браузерам ползать не целесообразно.
Опишите, что нужно сделать, чтобы увидеть их разными.

В теории, флекс может сжимать .container'ы, хотя в ситуации с вашими размерами он не должен бы этого делать.
Но можете попробовать задать для них flex-shrink: 0.

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

Почему не убирается блок?

последний блок .bg-img

Не скрывается он потому что он хоть и последний .bg-img, но не является :last-child.

Вот так сработает: .bg-img:nth-last-child(4) {}
Но ведь нет гарантии, что не добавится еще скриптов, а они тоже являются дочерними элементами.

Так что, лучше добавьте класс нужному элементу.

Как сделать такие вращающиеся и рандомна меняющиеся блоки?

Да вот же у вас тут всё

Где искать верстальщиков в пару дизайнеру?

Дарья,

присылайте и мне, хорошие дизайнеры на вес золота)

ага и мне тоже присылайте ;)

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

Григорий, мой комментарий не отменяет гридов, но элементов станет меньше. Тем более, что по семантике обертки вполне подходят.