Как сделать флекс гриды максимум 3 колонки?

zyusifov11, display: inline-bock для детей, чтобы не было переносов посередине ребенка

Как сделать флекс гриды максимум 3 колонки?

align-items
align-self

Но строка при этом останется как была.

Если вам нужно, чтобы блоки следующей строки занимали свободное пространство, то это либо css columns либо плагины типа masonry

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

Ну вы и накрутили
Видео
https://www.youtube.com/watch?v=Qwuyeo7iuNY
https://www.youtube.com/watch?v=8LFbS78a4Rw

Как сделать анимацию для изображений?

WapSter,
Думаю, что с семантикой нужно начинать разбираться и как можно раньше.

Как сделать так же?

CSS3-трансформации https://html5book.ru/css3-transform/
Наклонить и повернуть псевдоэлемент с заданной границей. Чтобы не нужно было заниматься обратной трансформацией для текста.

Из за чего появляется эта белая полоса, никаких отступов нет?

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

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

Ruslan Website,

Неужели это что то настолько сложное?

Да нет, простое, если сделать как написано выше.

Но лучше заняться адаптацией и я вижу, что у вас это неплохо получается.

Где можно взять гигантский/многостраничный макет с адаптацией?

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

, но как мне скачивать фото для вставки их на свой собственный

Ctrl+c ctrl+v?
Либо заменив их на любые другие.

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

Ruslan Website, тогда вам нужен meta viewport с фикс шириной 1200, а не device-width

Почему в firefox глючит анимация?

Женя, ну ок, но всё равно промежуточные нули лишние, достаточно 90%, зачем их еще раз писать в 66 и 80?
И это не отменяет первой части.

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

У вас и на десктопе есть горизонтальная прокрутка. Из-за того, что вы задали для body ширину 100% (зачем задали кстати?) и при этом забыли обнулить margin (тоже у body).

А на мобилке: сначала ширина шапки осталась фиксированной 855px, но если её уберете, то прокрутка тоже останется. Уже просто потому что элементы не влезают (вы забыли flex-wrap или как-то иначе перестроить элементы)

Из за чего появляется эта белая полоса, никаких отступов нет?

Vlad Volkov, И еще есть неплохая статья https://csswizardry.com/2012/11/code-smells-in-css/ (всегда уточняю, что согласна не со всем, что там написано и вообще нельзя слепо использовать какие бы то ни было идеи, а некоторые вещи утратили актуальность, но обычно люди находят, что из неё вынести)

Из за чего появляется эта белая полоса, никаких отступов нет?

Vlad Volkov,

Это нужно для того, чтобы страница без стилей имела хотя бы более‑менее читаемый вид

Ага. И это один из аргументов, почему нельзя обнулять все отступы и т.д., что я написала выше.
Потому что просто всё слипнется и читать это будет невозможно.
Как раз с дефолтными стилями страница точно будет читаемой. Да, будут отличия как она будет выглядеть в разных браузерах, но она будет читаемой.

Именно поэтому отказались от reset.css в пользу normalize.css.
А сейчас отказываются и от него. А пишут минимальный набор начальных стилей.

Я неоднократно тут объясняла почему обнуление это фу-фу, например, в комментариях к одному из ответов тут (и там есть не только мое мнение) https://qna.habr.com/q/1044708
Тут в комментариях к вопросу довольно подробно пишу что не так с normalize
https://qna.habr.com/q/1023244

Из за чего появляется эта белая полоса, никаких отступов нет?

Не нужно обнулять все отступы без разбора, задавать body line-height 1, убирать кавычки и т.д.

Почему в сафари 12 на маке отображаются кривые стили?

komosa, откройте browserstack и проверьте

Где можно взять гигантский/многостраничный макет с адаптацией?

Либо указать на источник где его можно найти?

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

И, если что, навыки верстки определяются не размером макета.

Почему в сафари 12 на маке отображаются кривые стили?

Очевидно потому что на сайте использованы свойства, которые 12ый сафари не понимает или понимает не так

Почему в firefox глючит анимация?

Живой песочницы на jsfiddle.net нет, делать за вас лениво, поэтому для начала просто предложу убрать свойства с префиксами moz, а оставшиеся написать в правильном порядке. Т.е. сначала с префиксами, потом без.
Да и вообще пользоваться автопрефиксером.

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

@-moz-keyframes third {
    0% { opacity:0;}
    66% { opacity:0;}
    80% { opacity:0;}
    90% { opacity:0;}
    100% { opacity:1; }
}

Лично я бы вообще все заменила на одну у которой 0 - прозрачно, 100 не прозрачно и пользовалась бы animation-delay и, если нужно, временными функциями.

Можно ли добавить тень css классом вместо замены, если уже у другого класса тень определена?

Если это возможно, то добавлять тень псевдоэлементу, а не самому элементу
Либо JS. Удобно через кастомные свойства css.

Как правильно и без костылей сделать адаптивную страницу 404?

Kostiantyn Kondratiuk,

А метатегов масса существует).

Так я поэтому и спрашиваю о чем речь

Вы правда считаете, что кто-то поделится 404-ой страницей в соц. сетях?

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