Как указать главную кнопку submit?

Павел,

Можно конечно, но вот хочу решить по другому.

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

Swiper: как исправить позицию центрального блока?

slidesPerView: "auto",

Как border опустить вниз?

1. nav - это основная навигация по странице. Внутри nav хорошо бы сделать список, а уже в нем ссылки.
2. Опустить бордер = увеличить расстояние между границей и текстом = padding
3. Либо использовать псевдоэлемент, а не бордер. Тут зависит от того, какая область клика вам нужна.
4.

и сделать данную ссылку активной

Скорее активная это не :active, а та, которая указывает на текущую страницу.
Т.е. либо дополнительный класс либо aria-current="page" и селектор по атрибуту.
5.

Но проблема в том что opacity все перебивает

Либо убирайте при наведении и у активной либо задавайте цвета через rgba
6.

И еще к тому же icon__search не меняет своего цвета.

Было бы удивительно, если бы цвет png картинки менялся свойством color.
Но также удивительно, почему эта лупа не svg. Как только она станет svg она сможет меняться через свойство color, если в самой svg fill будет задан как currentColor.
Есть и другой вариант: убрать лупу из разметки (вообще прекрасно) и вставить как mask (не забудьте префиксы) в css и менять цвет через background-color.

Как указать главную кнопку submit?

Не делать ненужную сабмитом.

Как правильно записать в SCSS стили для такой разметки?

Yriii, или не страдать фигней и использовать кастомные свойства css, переопределяя их в модификаторе.

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

Кто-то же написал в вашем коде col-auto...

Отправка данных на почту относится к вёрстке? считается ли это вёрстку, если это работа с данными?

NarutoHokage, к верстке нет, не относится.
Должен ли это делать верстальщик - как договоритесь. Поскольку скриптик, например, на php отправляющий почту не сложнее валидации формы на js (скорее проще).

Отправка данных на почту относится к вёрстке? считается ли это вёрстку, если это работа с данными?

NarutoHokage,

Кажется еще с самого первого вопроса ясно , что вопрос не относится к коду js. Но вы зачем то открыли его и потратили время чтобы указать мне на это

Так и зачем вы поставили тег javascript? И тем самым пригласили сюда людей интересующихся им.

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

Действительно, откуда может быть скролл, если вы сказали элементу выползти на 60 пикселей за него?

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

Как сделать три колонки на flex?

QnaTwitt, я вообще не понимаю проблему.
Нужны 3 колонки. Вы можете их сделать. Но нужен gap.
Так почему вы не можете его задать-то?

Если что, li нельзя оборачивать в div.

Как сделать три колонки на flex?

QnaTwitt, вы в состоянии флексом сделать три колонки флексами?

Как сделать три колонки на flex?

Ну и используйте column-gap, не поняла в чем вопрос.

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

Вы знаете, два блочных элемента идут друг под другом сами по себе.

Но в коде вы для nav задали флекс и элементы встали рядом.
Т.е. нужно отменить флексовость родителя или переделать на флекс колонками (фик знает, почему у вас не работает) или на гриды.

Компилировать ваш код в уме не очень удобно, поэтому сделайте песочницу с минимальным кодом, нужным для демонстрации проблемы на codepen.io

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

У центрального слайда есть уникальный класс center.
Вот и показывайте свой текст, когда есть этот класс.

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

Зачем дублировать вопрос?

Как отобразить картинку на сайте при помощи Bootstrap?

Ste1Z, да-да, она самая.

Папка с картинками находится в той же папке, что и страница.

Боюсь, что на собранном сайте это не так.

Как отобразить картинку на сайте при помощи Bootstrap?

Куда ещё смотреть, чтобы заработало?

В инструменты разработчика на вкладку Console.
Там браузер показывает где ищет картинку.
Сравнить с тем, где она на самом деле и переписать путь.

Как выделить активный элемент?

Ох, как тут всё..
Попробую распутать:

1. Начните с того, что div нельзя вкладывать в label.
2. Сам инпут, я так понимаю, у вас скрыт. (Используйте паттерн visually-hidden (гуглится)) Меняем разметку: сначала инпут, после него label, внутри которого span и картинка. Инпут и лейбл связываем по for-id.
3. hover перевешиваем на label
4. Состояние выбранного или не выбранного делаем через соседние селекторы input:checked + label {стили}

p.s.
1. Если в вашем коде !important, значит вы скорее всего творите что-то не то.
2. Лучше не засорять демонстрируемый код свойствами с префиксами.

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

Какой логикой руководствоваться?

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

А дальше дело техники.

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

godsplane, не вижу пока вариантов без js или выдачи с бэка в обертках.