Кнопка не принимает свойства другой кнопки

Question

Я пытаюсь сверстать 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>

Answer 1

Вы 2 раза прописали class для второй кнопки, также стоит добавить border:none. Перед form в стилях уберите точку, это не класс. Или в html добавьте класс form собственно к самой форме form. Ну и еще я убрал container в форме, так как у вас уже сам весь контент + форма в контейнере

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;
  border: none;
}

.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: 20px auto 0;
  /*	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="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 btn1">Двигаться к мечте!
					</button>
      <!-- 	</div>  -->
    </form>
    <!-- <div class="button">  
					<button type="submit" class="btn1">Двигаться к мечте!>
					</button>
				</div>  -->
    <!-- </div> -->

</section>

БЛОГ НА HUSL

Кнопка не принимает свойства другой кнопки

Ответы (1 шт):