Я пытаюсь сверстать html страничку. Я хочу чтобы нижняя кнопка брала свойства у верхней кнопки, но была шире и по центру. При этом я хочу чтобы поля ввода были по центру на картинке . Что я делаю не так?
body {
font-family: 'Ubuntu', sans-serif;
color: #201b2d;
font-size: 15px;
padding: 0;
margin: 0;
}
div,
p,
input,
button,
form,
span,
a,
ul,
li {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
}
.container {
width: 1170px;
margin: 0 auto;
}
.btn {
font-family: 'Montserrat', sans-serif;
background: #ffd429;
color: #2e2a1b;
display: block;
width: 225px;
padding: 20px 0;
text-align: center;
text-decoration: none;
transition: all 0.5s ease;
}
.btn:hover {
background: #ecce56;
}
.forms {
padding: 110px 0;
background: #ecf3f8;
text-align: center;
}
.input {
margin-bottom: 20px;
width: 345px;
height: 50px;
padding-left: 50px;
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
border: 1px solid #bbbbbb;
width: 100%;
}
.form {
/*margin: 0;*/
width: 340px;
margin: 0 auto;
/* display: flex;
flex-direction: column;
align-items: center;*/
}
.btn1 {
width: 100%;
/*margin: 0 35%;*/
}
<header id="header" class="header">
<div class="container">
<a href="#" class="btn">Двигаться к мечте!</a>
</div>
</header>
<section id="forms" class="forms">
<div class="container">
<!-- <div class="mail"> -->
<h2>Форма заказа билета в будудщее
</h2>
<form action="#">
<input type="name" placeholder="Имя" name="name" class="input" required>
<!-- <br> -->
<input type="e-mail" placeholder="E-mail" name="e-mail" class="input" required>
<!-- <br> -->
<input type="phone" placeholder="Телефон" name="phone" class="input" required>
<!-- <br> -->
<input type="fly" placeholder="Куда я полечу в ближайшее время?" name="fly" class="input" required>
<!-- <div class="button"> -->
<button type="submit" class="btn" class="btn1">Двигаться к мечте!>
</button>
<!-- </div> -->
</form>
<!-- <div class="button">
<button type="submit" class="btn1">Двигаться к мечте!>
</button>
</div> -->
<!-- </div> -->
</div>
</section>