Почему max-width и width разное отображение?

Писать box-sizing для html бесполезно. У него нет ни отступов ни бордеров, а свойство не наследуется.
Наверное, вы хотели задать его для *
Или где-то в коде есть inherit, но вы решили не показывать его нам.

В любом случае этих стилей мало, наверняка у родителя есть флекс или грид или что-то там ещё.
Сделайте песочницу на codepen.io с видимой проблемой.

Реально ли такое сверстать?

godsplane,

если делать гридами, то непонятино как делать закругления.

Написала в первом комментарии.

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

Зачем?
Абсолютами там только псевдо с уголками.
Хитрость одна: синий блок это два элемента (вот как у вас на картинке), а не один. Ну либо псевдо от большого блока, чтобы не делать пустых оберток.
Желтый не вижу смысла делить.

У меня была идея с бордером серым, и зеленым фоном всего блока, но тогда бордеры придется укзаывать для выборочных сторон.

Фон серый. И gap.

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

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

Реально ли такое сверстать?

А что именно у вас вызывает затруднения?
Гриды? Псевдо с радиальными градиентами (или svg)?

Тут даже теней нет, чтобы были проблемы.

SSR будет ли робот индексировать html контент со стилем visibility: hidden?

https://www.youtube.com/watch?v=Ns0zijQJxH4&t=1s

Блок "тебе понравится" с рандомными кроссовками. как сделать?

Ни в HTML ни в CSS нет рэндома.
Если нельзя на JS (в целом и хорошо, что нельзя), то этим должен заниматься бэк.

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

kot98,
- svg (картинкой, фоном, clip-path)
- радиальными градиентами (возможно + псевдо, по вашему скрину не ясно чем оправдан этот выступ)

Вот из аналогичного вопроса https://codepen.io/AnnaSummer/pen/gOQVxBR

Как сверстать такую корзину на flex или grid?

Тоже поддержу комментарии выше.
Это табличные данные. Соответственно, лучше всего их верстать таблицей.

Как правильно переписать css в scss с нестингом?

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

Как темизировать иконки разноцветные svg?

svg поддерживают кастомные свойства css внутри себя.
Пишете что-то типа fill="var(accent-color-1)"

Как сделать Isotope gallery 3 в ряд?

Артем Колчин,
И теперь вы не можете из 100% отнять отступы и посчитать какая же ширина должна быть у колонок?

Как сделать Isotope gallery 3 в ряд?

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

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

Сначала исправьте разметку, чтобы валидатор был доволен.
Потом сделайте песочницу на codepen.io с тем, что не получилось

Как сделать ширину или высоту блока по содержимому + (что-то)?

Паддинги задайте..

Не отображается в браузере надпись в html файле, что делать?

Daardevil, на скрине несохраненный файл

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

В Опере это где?
В телеграме да, заменяется, используйте обертку в апострофы `

Почему overflow: hidden; у body так странно влияет на popup-окно?

хотя это необязательное свойство, его добавляют на всякий случай

1. На body оно не сработает на мобилках.
2. Не нужно его ставить на всякий случай.
Нужно верстать так, чтобы ничего случайно не вываливалось.
Там где оно должно вываливаться, лучше вешать overflow на свою же секцию (или типа того, но не на body)
Бездумный overflow может привести к потери части контента.

Для всего остального сделайте песочницу на codepen.io

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

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

Что именно вы не знаете? Как прочитать пары, а потом прийти домой и поработать за компом? Нужен ли для этого кофе?

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

Ну и почему вы не можете его просто написать в коде перед Регистрацией?

Если не можете, то изучайте сначала правила ресурса, потом гриды и абсолюты.

Можно ли разместить фотографии в таком виде?

Можно.
Обычные гриды, если первична сетка.
Если это совсем рэндом, то плагины типа masonry

Как лучше изучать базу js?

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