Добрий день!

▼код

Э такий код html

<div class="email">
    <h2>Design tips, tricks and freebies. Delivered weekly.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing.</p>
    <div class="subscriber">
        <form action="" method="post">
            <input type="email" name="email" placeholder="Email Adress">
            <input type="submit" value="SUBSCRIBE">
        </form>
    </div>            
</div>

і його CSS

.email {
    background-color: #F5F0DD;
    position: absolute;
    top: 4720px;
    text-align: center; 
    width: 100%;
    padding-bottom: 220px;
}
.email h2 {
    font-family : 'Ubuntu', sans-serif;
    font-size : 1.5em;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.email p {
    font-family : 'Ubuntu', sans-serif;
    font-size : 0.7em;
    color: #fff;
    margin-bottom: 25px;
}
.subscriber {
    position: absolute;
}
.subscriber input[type="email"] {
    border : 0;
    border-radius : 5px;
    width : 240px;
    font-family : 'Open Sans', sans-serif;
    font-size : 1.0em;
    color : #000;
    padding : 10px 10px 10px 10px;
    position: relative;
    top:10px;
}

.subscriber input[type="submit"] {
    background : #ff2d2d;
    font-size : 0.7em;
    color : #fff;
    font-family : 'Ubuntu', sans-serif;
    border : 0;
    border-radius : 5px;
    padding : 12px 35px 12px 35px;
    cursor : pointer;
    position: relative;
    top:30px;
}

Треба, щоб на усій пристроях менших за екран компа поля input центрувались по горизонталі одне під іншим.
Бюсь-бюсь не вдається зробити правильно центрування. Якщо на портреті процентрує, то при переключенні на ландшафт знову усі поля то в право то вліво. Дякую

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

FakiNyan написав:

таке ?
https://jsfiddle.net/38chsL4n/6/

<div class="email">
    <h2>Design tips, tricks and freebies. Delivered weekly.</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipis cing elit, sed dooing.</p>
    <div class="subscriber">
        <form action="" method="post">
          <div class="wrapper">
            <input type="email" name="email" placeholder="Email Adress">
            <input type="submit" value="SUBSCRIBE">
            </div>
        </form>
    </div>            
</div>

.email {
    background-color: #F5F0DD;
    position: absolute;
   
    text-align: center; 
    width: 100%;
    padding-bottom: 220px;
}
.email h2 {
    font-family : 'Ubuntu', sans-serif;
    font-size : 1.5em;
    color: #fff;
    margin-top: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
}
 
.email p {
    font-family : 'Ubuntu', sans-serif;
    font-size : 0.7em;
    color: #fff;
    margin-bottom: 25px;
}
.wrapper {
  display: flex;
  justify-content: center;
}
.subscriber input[type="email"] {
    border : 0;
    border-radius : 5px;
    width : 240px;
    font-family : 'Open Sans', sans-serif;
    font-size : 1.0em;
    color : #000;
    padding : 10px 10px 10px 10px;
    position: relative;
}
 
.subscriber input[type="submit"] {
    background : #ff2d2d;
    font-size : 0.7em;
    color : #fff;
    font-family : 'Ubuntu', sans-serif;
    border : 0;
    border-radius : 5px;
    padding : 12px 35px 12px 35px;
    cursor : pointer;
    position: relative;
}
@media only screen and (max-width: 720px) {
  .wrapper {
     flex-direction: column;
     align-items: center;
  }
  .subscriber input[type="submit"] {
    margin-top: 20px;
  }
}

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