LI4NOOST, эммм... сделать карточку гридом.
Либо разместить поверх картинки абсолютом.
Либо обернуть их вместе во что-нибудь и снова гридами или абсолютами.
Принцип такой: делаете грид из каждого пункта. В data-атрибут пишете текст из пункта.
Делаете псевдоэлемент из data. Делаете его жирным или большим или как там нужно. Кладете нижним слоем в грид и скрываете opacity, visibility.
Потом с самим текстом делаете что хотите.
Делать песочницу лень, потому что это популярный тут вопрос, нужно будет погуглите прямо код. Раньше он был на абсолютах, теперь можно на гридах.
Какой-то легкий бред в коде.
Инпуты не в форме, а кнопка в форме?
Кнопки удобнее делать с помощью button.
Отступы между элементами удобнее всего задавать с помощью margin или gap. Но имейте в виду, что вертикальные margin не работают с инлайновыми элементами и нужно сменить display.
*ничего не работает
0. Так у вас вообще стилей нет ;) Вы показали только разметку. Откуда там взяться отступам?
1. Проверьте код валидатором https://validator.w3.org/nu/
2. Исправьте ошибки, которые указала.
3. Сделайте песочницу на codepen.io или аналоге с видимой проблемой.
4. Или самостоятельно посмотрите в инструментах разработчика в браузере, почему ваши отступы не применились.
Да, я сразу не достаточно полно описала, слетают не абсолютно все css стили, а только некоторые, вот фон, например, слетел, а цвет ссылок в футере нет ))
Правильный вопрос залог правильного ответа.
Ответ очевидный: неверно прописаны пути к картинкам в вашем файле стилей.
Что делать:
1. Читать https://htmlacademy.ru/blog/html/links
2. Смотреть что написано на вкладке Console в инструментах разработчика. Браузер там пишет где ищет картинку. Нужно сравнить с тем, где она на самом деле и исправить применив знания из статьи.
Например, им делается простенькая раскладка типа masonry в 2 строки вместо плагина.
Как обычно в верстке, одна задача имеет несколько решений. И в разных ситуациях могут выиграть разные.