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

gimlen, начните с того, что вытащите лого из списка. Лого это не элемент меню, но может быть включен в nav.

Ну вот типо, как только ёё по вертикали выровнять?

Проще всего флексами.
https://html5book.ru/css3-flexbox/#align

Как прижать изображение к краю контейнера?

Thomas Laybe, попробуйте переформулировать вопрос. Сейчас получается, что условие вопроса выполнено: картинка прижата и живет вместе с блоком. Блок уполз не туда и картинка вместе с ним.

И приложите к вопросу песочницу с видимой проблемой на jsfiddle.net или аналогах.

если задать абсолютное позиционирование и right 0, соответственно изображение также уходит в край монитора на разрешениях больше 1920px.

Вы можете через @media переопределять положение псевдо (а ноут это не контентное изображение, т.е. не img, а украшение).

Как правильно скопировать меню с сайта, что бы работало?

подскажите как правильно скопировать меню с категориями товаров с сайта?

В целом, вы всё худо-бедно скопировали.
Осталось разобраться с позиционированием.
У вас почти всё на месте, только блок с меню выехал налево за окно.

И это, флоатами сетку не делают уже оччччень давно. Лучше разберитесь как это делать и переверстайте нормально.

Почему div-ы c позиционированием absolute-relative не реагируют на изменение масштаба браузера?

suprascapularis69, вопрос был не об этом.

Но, раз уж такая тема зашла, то
Пропорции блока - это хак с паддингом https://jsfiddle.net/Ankhena/cLhxv7eq/ (этот пример древний, в нем нужно заменить абсолюты на гриды) либо aspect-ratio (если позволяет ТЗ по поддержке браузерами)
Пропорции картинок - картинки сами сохраняют свои пропорции, если им не приказали сделать обратное. Читайте какие есть значения и background-size и object-fit.
Текст. Тут сложнее. Есть простые фокусы с размерами в vw в сочетании с функцией clamp. Очень удобно верстальщику. Но может вызвать проблемы с увеличением шрифта в браузере у пользователя, если есть проблемы со зрением. Пользователь ничего не сможет сделать.
Т.е. решать нужно для каждого конкретного случая отдельно (ТЗ, целевая аудитория, нюансы макета и т.д.).

Почему div-ы c позиционированием absolute-relative не реагируют на изменение масштаба браузера?

suprascapularis69, ау?

Можно ли улучшить код?

towncitybr,

но в макете они квадратные

Ну так и вставляйте их сразу квадратными. Это проще всего.

Альтернативы: сделать квадратным блок и использовать object-fit.
Квадратный блок делается хаком с паддингом (гуглится) или с помощью aspect-ratio, если устраивает его поддержка.

Как сделать это на флексах?

Сейчас вы не используете ни одного свойства флексбоксов, только задали сам display.
Хорошая статья https://html5book.ru/css3-flexbox/

Но начать имеет смысл с правильной разметки.

Ни изображения маркетов ни дядька с деньгами не являются контентными изображениями.
Дядька - псевдоэлемент или его фон. Маркеты - ссылки с фоном (хорошо бы туда добавить aria-label или доступно скрытый span).

Если есть желание сделать этот блок флексом, то у флекс-контейнера должно получится 2 ребенка: первый - блок с текстом и ссылками на маркеты, второй - псевдоэлемент.

Как задать градиент кнопкам bootstrap?

применяла background-inline-gradient, и background-image-inline-gradient но безрезультатно

Нет таких свойств.

css.yoksel.ru/linear-gradients

Почему div-ы c позиционированием absolute-relative не реагируют на изменение масштаба браузера?

suprascapularis69, это несомненно будет работать. Но совпадет ли это с тем как вам нужно или нет, я не знаю, потому что не знаю какую именно задачу вы решаете. У background-size много значений.

Почему div-ы c позиционированием absolute-relative не реагируют на изменение масштаба браузера?

suprascapularis69, для этого есть background-size

Почему div-ы c позиционированием absolute-relative не реагируют на изменение масштаба браузера?

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

Из за чего происходит такое смещение при уменьшении размера экрана?

Ruslan Website, https://new.ruslan.website/icleaning2/ тут 404
https://new.ruslan.website/icleaning/ тут адаптивная

И так нет ответа на вопрос, что именно вы пробовали писать в meta viewport

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

Если вам не хочется, то можете нагуглить статью с хабра типа "meta viewport для неадаптивных сайтов". Точного названия не помню, уж несколько лет прошло.

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

alaskafx, типа того

<div class="block" :style="{ '--bg': 'red'}">block</div>

.block::before {
  content: "text ";
  background: var(--bg);
}

Какую программу для работу с таблицами посоветуете?

Генератор таблиц https://tablesgenerator.com/html_tables
Можно выбрать сколько нужно строк и столбцов, потом объединять их как захочется.
Ширину столбцов можно и ручками дописать, благо достаточно сделать это только для первой строки или использовать теги col. Высоту в вебе лучше вообще не задавать, но если прям хочется, то это тоже быстро решается ручками.

Либо в гугл с запросом "html table генератор" и выбирайте самостоятельно.

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

Думаю, что проще всего через кастомные свойства css и :style. Правда, задавать нужно родителю.

Как проверсти A/Б-тест в roistat, если сайт сделан на констуркторе сайтов Tilda?

mayeswoope, так и редактируйте вопрос. А пока один из них нужно удалить.

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

Из за чего происходит такое смещение при уменьшении размера экрана?

Ruslan Website, Руслан, не забывайтесь, пожалуйста. Это ваша задача и справится не можете с ней вы. Не нужно путать q&a и фриланс. Это первое.

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

Сайт я уже сделал под ширину смартфона с одним media, но если ее убрать то никто из вас не сможет решить проблему с изменением размера экрана, чтобы сайт весь (десктопная, полная версия) умещался в эти размеры.

Какую ширину вы указывали в meta viewport, когда пробовали?

Как вставить картинку и текст справа от сетки Grid?

Владислав Моисеенко, абсолют это position: absolute

Т.е будет выпадать под ним внизу?

Почему именно внизу? Куда спозиционируете, там и будет.

Может проще сделать выпадающее в правую сторону меню на bootstrap

Это как вам удобнее. Сути не меняет.

А При наведении на категорию товара "Батарейки" например, у нас справа от него выскакивает форма-выпадающее меню. Как в DNS к примеру.

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

И перечитайте пункты 1 и 2 из первого комментария.
Без них мне практически нечего добавить. Потому что скрин не соответствует словесному описанию и совершенно не понятно где и какой у вас grid и где сейчас располагается тот блок который "типа новостей и горячих товаров"

Как в фотошопе отключить автоматическое соединение двух последних точек с зажатым шифтом?

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

Просто не зажимайте шифт заранее. А сначала мышкой, а потом шифт.

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

Вы же написали удалить родителя кнопки. Он и удаляет td.
Вам-то надо строку
.parents('tr')

Да ещё и сложность вопроса ставите среднюю :) :) :)