Почему main все игнорирует?

Можно просто посчитать количество открывающий и закрывающих div.

Вы даже подписи им ставите.
Это у вас открывающая конструкция

<div class="container"> <!-- container начало -->
                    <div class="box">
                        <div class="slider middle"><!-- Слайдео начало -->

Это закрывающая

</div><!-- Сладйер конец -->

                </div><!-- container конец -->

p.s. и не очень понятно зачем столько оберток.

Что не так со слайдером?

niklazh, и флоат на флекс замените. Не могу смотреть :)

Что не так со слайдером?

niklazh,

за экран ничего не должно уезжать, на странице всегда должна быть 1 из 3 картинок

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

Что не так со слайдером?

Значит, на последнем кадре оно не должно уезжать за экран?

GitHub: Как настроить url адрес для многостраничного сайта?

Писать пути начиная с точки не вариант?

Почему не получается сделать РЕАЛЬНЫЙ размер шрифта меньше 16px при верстке сайта?

Aleksandr-Borisevich,

Вот в чем "минус" выставления "минимума шрифта" - не уменьшается шрифт, меньше заданного нами же, минимального.

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

Почему не получается сделать РЕАЛЬНЫЙ размер шрифта меньше 16px при верстке сайта?

Aleksandr-Borisevich,

А нужно ставить - минимальный!)))

Но имейте в виду, что у пользователя там может стоять что угодно.

И подключение всё таки поправьте, если я права.

Почему не получается сделать РЕАЛЬНЫЙ размер шрифта меньше 16px при верстке сайта?

Решать проблему в настройках вашего браузера.

Но вот это var(--font-family-bold) наводит на мысль о том, что шрифты вы всё таки подключаете неверно. Работать будут, но коллеги вас проклянут.
Шрифты разных жирностей подключаются с одним именем, а не с разными, как похоже сделано у вас.

Надо так:

@font-face {
        font-family: "OpenSans";
        src: url("fonts/opensans.woff2") format("woff2"),
        url("fonts/opensans.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
        }

        @font-face {
        font-family: "OpenSans";
        src: url("fonts/opensansbold.woff2") format("woff2"),
        url("fonts/opensansbold.woff") format("woff");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
        }

Как при нажатие на li выводить ul список?

Гуглить "javascript accordeon".

Как правильно подвинуть гриэлементы внутри сетки?

godsplane,

но почему то получилось только когда вы ответили

Да, так бывает ))

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

Очевидно, рисовать верхний всем кроме первого, а не нижний всем кроме последнего

Как правильно подвинуть гриэлементы внутри сетки?

godsplane, есть ключевое слово span

.big {
  grid-column: span 2;
  grid-row: span 2;
}

Игру по гридам пройдите уже, верстать станет легче. Дел на полчаса. Гуглится по grid garden.

Как правильно подвинуть гриэлементы внутри сетки?

godsplane, надо-то что?
На картинке нарисована странная ерунда, вызывающая сомнения либо в формулировке вопроса либо в разуме дизайнера.

Если дизайнеру действительно нужны такие дыры, то если картинка обернута в figure, то width 100% для картинки. Возможно, object-fit для надежности, чтобы не вывалилось ничего.
Если нет, то align-items в помощь.

Дело в том, что я даже не вижу тут проблемы. Кроме сомнительного дизайна.
Так что объясните, пожалуйста, что именно у вас не получается или не понятно как делать.

Как правильно подвинуть гриэлементы внутри сетки?

Картинки вырезанные с белыми скругленными уголками это огонь!

Как правильно подвинуть гриэлементы внутри сетки?

Надо-то что?

Как правильно подвинуть гриэлементы внутри сетки?

Из каких вариантов выбрать? ;)

И где песочница от этого?
Как первый раз тут..

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

strelok011, можете даже не начинать, тут бесполезно. Я уже раз десять лет за 5 пыталась. Не работает )))
Ссылки в ссылки, селекторы через ж, классы вырвиглаз... всё так и остается.

Почему флекс срабатывает на второй тег(а), если я поставил .unn>a, для первого, что с этим делать?

Антон Вебсайтовский, это не у меня в примере... Это скрин девтулзов того невалидного кода.

Как сделать так чтобы блок div не расширялся при добавлении элемента?

Beginner_in_IT, если под "расширяется" вы имели в виду увеличение высоты, то объяснение в комментарии выше.

relative не убирает элемент из потока и его бывшее место остается зарезервированным, оно и увеличивает высоту.

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

Это называется progress bar https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Как сделать так чтобы блок div не расширялся при добавлении элемента?

Beginner_in_IT, посмотрела. Там всё та же дикая разметка. Валидатор тут: https://validator.w3.org/nu/
Посмотрите видео Вадима Макеева о том как сверстать навигацию https://www.youtube.com/watch?v=y52rtbUeCac&t=14s

Двигать бургер с помощью relative мало удобно. Ведь место под него останется зарезервированным в том месте, где элемент был до сдвига.
Используйте либо абсолют либо флексы с гридами.