Почему не работает z-index?

Потому что z-index работает не так, как вам хочется. Читайте про контекст наложения.

Чтобы header-bottom провалился под родителя, ему нужно задать z-index: -1, а у header__container его совсем убрать.
Но что-то я подозреваю, всё должно быть совсем не так. Но макета нет, так что не ясно.

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

Проверяйте кодировку файлов - должно быть uft-8 без BOM.
Если откроете инструменты разработчика, в начале будет стоять кракозябра.

Другой вариант (сомнительный, если шаблон один и тот же у этих страниц) - выпадение вертикальных margin,

Как сделать конструкцию IF ELSE на JS привязанной к кнопке в HTML?

Nekio,

button нужен для отправки формы

Да не только.
кнопка - действие
ссылка - переход

Кнопка "Очистить" не срабатывает HTML + JS?

Действительно затык.
Reset очищает форму. Формы нет, очищать нечего.

p.s. кнопки удобнее делать тегами button, чем инпутами.

Как верстать адаптивный элемент из нескольких картинок?

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

Другой вариант: множественные фоны. Точки - радиальными градиентами (или SVG).

Если хочется потренироваться с позиционированием или гридами - делайте отдельными элементами и позиционируйте.

В широкоформатном разрешении все ок, но при адаптиве все начинает ездить по плохо понятной мне логике.

Плохо понятная логика основывается на том, как и в каких единицах вы задали размеры и координаты.

Как закруглить задний фон и не задеть картинку?

Шепотом: это вообще не img, это фоны или псевдоэлементы.

Как сделать конструкцию IF ELSE на JS привязанной к кнопке в HTML?

Nekio, <button>, not <div>

Как сделать кнопку закрытия по диагонали?

как сделать эту кнопку по диагонали от блока?

Задать одинаковые смещения по вертикали и горизонтали...

нужно чтобы работало на всех разрешениях

Оставить отступ от блока до окна такой, чтобы влез крестик с учетом смещения.
Или использовать относительные единицы измерения.
Либо комбо из этих вариантов.

Ну и всегда есть @media, чтобы скорректировать ваш план.

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

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

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

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

Что то не так с flex?

Нужно чтобы было 3 карточки одинакового размера

Для начала нужно вставить 3 карточки в разметку вместо одной.

Потом уточнить, у них должна быть одинаковая ширина или высота.
Потому что с одной стороны вы задаете flex-direction: column;, а с другой, не указываете высоту обертки и запретили flex-grow элементам.

В итоге:
Если речь про три в ряд: то нужно убрать про column.
Если про три в столбик, то проще перейти на гриды и единицы fr.

Флекс родитель со скролом, не закрашиваются все элементы?

Да вообще таблицы имеет смысл верстать таблицами
https://codepen.io/AnnaSummer/pen/eYyLdbw

В каком случае img и svg используются в html?

Разметка - смысл.
Украшения - стили.
Если вы посмотрите на страницу без стилей, вам всё будет понятно? Ничего лишнего не будет?
Вот и вся логика.

Если картинка контентная, например, изображение конкретного товара в интернет магазине, то это img.
Если это украшение, то в стили. Например, иконки соц.сетей это украшения ссылок. Картинка ставится фоном и/или псевдоэлементом, а внутрь ссылки добавляется спан с классом visually-hidden (гуглится по "паттерн visually-hidden") и поясняющим текстом типа "наша группа в ВК".

Обязательно почитайте про доступность
https://developer.mozilla.org/ru/docs/Web/Accessibility
https://developer.mozilla.org/ru/docs/Web/Accessib...
и т.д.

Есть ещё аргумент за вставку SVG в разметку: это анимации и замена нескольких цветов при наведении (или других состояниях).

Почему слайдер swiper.js перелистывает при клике на слайд?

Яна Егорова,

Считается ли это что ваш ответ решение проблемы?)

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

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

Даже интересно, что ответ такой же, как в предыдущем вопросе: radial-gradient.

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

radial-gradient и background repeat

Как перенести этот пример с grid на flex?

loner, ок, отличный план.
Что делать, чтобы его осуществить, я написала выше.

Как перенести этот пример с grid на flex?

1. Зачем?
2. Если грид может так разложить элементы сложенные в одну обертку, то флекс так не умеет.
Вам нужно создать дополнительные обертки.
3. Если сложности останутся, то выложить код на codepen.io и описать что именно не выходит.

Как изменить картинку к текущему пункту меню?

Я, конечно, не вижу макета, но очень вряд ли эти картинки являются контентными.
А значит, должны быть сделаны стилями (с помощью background и/или псевдоэлементов).

И просто меняете этот фон с помощью селекторов.

Если изображения должны быть вставлены через CMS, то прописываете пути к ним не в src тега img, а в атрибут style родительской ссылки как кастомное свойство.

Вот и всё.

Почему флекс элемент не хочет прижимать другое флекс элемент?

gazes12, scss там есть и работает лучше, чем в jsfiddle.
Но дело ваше. Да и ответ я вам уже написала.