Поле ввода не выравнивается правильно в точке останова

Question

Я создаю базовую c форму, содержащую 3 поля ввода. Все в порядке, но когда я уменьшаю свое окно, кнопка «submit» странно располагается с полем электронной почты (перед «516px», после «768px»). Прежде чем он достигнет точки останова `516px`, он работает нормально. Но разве он не должен оставаться в `center` ** перед **` 768px`, поскольку я объявил точку останова на `768px`?

HTML:

<div class="header-form header-flex">
  <input type="text" placeholder="Name">
  <input type="email" placeholder="Email">
  <input type="submit"> 
</div>

CSS:

@media (max-width: 768px) {

.header-form input[type=text], input[type=email], input[type=submit] {
  width: 70%;
}

.header-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  }
}

JSFiddle: https://jsfiddle.net/ngq7edc8/9/

Итак, что я могу делать сейчас?

Answer 1

Если вы хотите разместить их вертикально в точке останова, просто добавьте flex-direction

@media (max-width: 768px) {
.header-form input[type=text], input[type=email], input[type=submit] {
   width: 70%;
 }
.header-flex {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   flex-direction: column;
 }
}

Answer 2

Вы можете попробовать следующее:

Поскольку вы работаете с формой , идеально включить элемент формы

Итак, ваш html будет:

<div class="header-form header-flex">
  <form action"" method="">
    <input type="text" placeholder="Name">
    <input type="email" placeholder="Email">
    <input type="submit">
  </form>
</div>

Answer 3

Это будет ваш html

<div class="header-form header-flex">

<div class = "myblock">
   <input type="text" placeholder="Name">
</div>
<div class = "myblock">
  <input type="email" placeholder="Email">
</div>
<div class="myblock">
<input type="submit">
</div>
  
</div>

И CSS

/* Basic style */
.header-form input[type=text],
input[type=email],
input[type=submit] {
  width: 300px;
  padding: 12px;
  margin: 6px;
  border: 1px solid black;
  border-radius: 30px;
  outline: none;
}


.header-form input[type=submit] {
  width: 100px;
  font-weight: bold;
}

.header-form input[type=submit]:hover {
  color: white;
  background-color: black;
  transition: 0.5s;
}

/* Breakpoint style */
@media (max-width: 768px) {

  .header-form input[type=text],
  input[type=email],
  input[type=submit] {
    width: 70%;
  }

  .header-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}
.myblock{
  display: block;
  width:100%;
}