Danny Arty

Задать

p {
  display: flex;
}

А почему у вас запятая в отдельном span-е?

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

html, body{
height: auto;
width: 100%;
overflow-x: hidden;
}

Тут этот баг обсуждался ранее.
Как вариант можете сделать так:

-webkit-transform: translate(-50.1%, -50.1%);
  transform: translate(-50.1%, -50.1%);

Для .select__card-row вместо flex-wrap: wrap; задайте
flex-wrap: nowrap;

upd.
Задайте для

.select__card-column {
min-width: 200px;
box-sizing: border-box;
}

Делал давно примерное. Со стилями думаю разберетесь.

Может вместо opacity: 0; сделать opacity: 1;?

Добавьте body свойство margin: 0;

body {
margin: 0;
font-size: 21%;
padding: 0px;
}

Ну как вариант, если именно данная структура нужна, то для header-bg и header задайте данные стили:

.header {
position: relative;
}
.header-bg{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("../img/header-bg.jpg") no-repeat center;
background-size: cover;
background-attachment: fixed;
filter: blur(20px);
z-index: 0;
}

.classPointer button {
  cursor: pointer;
}

У вас один мелкий недочет: вы обращаетесь к svg, будто это дочерний элемент инпута с классом form-control. Синтаксис должен быть такой:

.form-control:focus + .account__icon g {
  opacity: 1;
}

Примерно так, далее стилизуете под себя

Если требуется кроссбраузерное решение, то только средствами CSS вы этого не добьетесь, как минимум потому, что например в FF свойств для стилизации меньше.
Лично я использую в основном mCustromScrollbar или Simplebar - оба отлично работают в любом браузере на любом устройстве. Ну тут, как говорится, конечно уже дело вкуса.