Дякую за увагу! Добре, мені ніяк не вдається зробити так, щоб при усіх варіантах портрет/ландшафт input "Email address" i button "Subscribe" рівнялись по центру. Чи так можливо? Поки що мушу при різних розмірах просто центрувати left: XXpx;

Чому так є погано? Я ще не спец, якщо можна поясніть.

Дякую. Буду вивчати. Якщо будуть питання, можна звернутись?

Нажаль не працює. Можливо це через
.wrapper {
  display: flex;
  justify-content: center;
}
З flex не працював ще. Можливо я щось не правильно ще розумію, але якщо flex вимагає якісь модулі, які треба
додатково підключити (як bootstrap), то підскажіть. Дякую.

Проблема в тому, що не знаю (не розумію) як правильно верстати адаптивно для різних розмірів мобільних пристроїв (і тільки мобільних) і варіантів портрет\альбом. Зверстав сторінку для ПК - усе добре на ПК виглядаю. Зменшуючи розміри екрана на ПК, верстка теж гарно виглядає. Тепер роблю мобільну адаптацію.
Найшов в неті таку заготовку

/* Смартфони (портретний і альбомний режими) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Додаємо сюди стилі*/
}
/* Смартфони (альбомний режим) ———– */
@media only screen
and (min-width : 321px) {
/* Додаємо сюди стилі*/
}
/* Смартфони (портретний режим) ———– */
@media only screen
and (max-width : 320px) {
/* Додаємо сюди стилі*/
}
/* iPad (портретний і альбомний режими) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Додаємо сюди стилі*/
}
/* iPad (альбомний режим) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Додаємо сюди стилі*/
}
/* iPad (портретний режим) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Додаємо сюди стилі*/
}
/* Настільні комп’ютери і ноутбуки ———– */
@media only screen
and (min-width : 1224px) {
/* Додаємо сюди стилі*/
}
/* Великі екрани ———– */
@media only screen
and (min-width : 1824px) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (портретний і альбомний режими)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (альбомний режим)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
/* Додаємо сюди стилі*/
}
/* iPhone 5 (портретний режим)———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
/* Додаємо сюди стилі*/
}

Чи потрібно для кожного типу екрана в цій заготовці свою розмітку робити? Виходить дуже багато варіантів і якось не гнучко.
От і подумав чи може бути якось так щоб на ТІЛЬКИ на мобільних пристроях форми введення були одна під другою і центрувались. тоді виставивши це
@media only screen
and (min-device-width : 320px)
до якогось максимального мобільного розміру буде завжди центровано
and (max-device-width : ХХХpx)

Ось приклади як виглядає на ПК і як виглядає в Chrome в відладці в портреті і при обертанні в альбом

А це при переключенні в альбом

Хочу, щоб на третій картинці, було як на другій. І на усіх мобільних екранах, щоб центрувало поля введення і кнопку Subscribe.