HTML 表格有一个奇怪的偏移量

Question

我的 HTML 表格看起来很难看，因为它在姓氏中有正确的偏移量（我不想要那个） image showing what I mean 而且我找不到任何问题，也许有人可以帮忙？下面我添加了 HTML 和 SCSS 代码。谢谢你的帮助。

.contact{
display: flex;
justify-content: center;
align-items: center;
height: 60vh;
width: 100%;
}
@mixin contact_form_input_style {
   width: 100%;
   background-color: $img-wrapper-bg-color;
   border: none;
   border-radius: 10px;
   height: 50px;
   padding: 10px;
   margin: 10px;
}
.contact-form{
display: flex;
width: 60%;
justify-content: center;
align-items: center;
flex-direction: column;
.email{
    width: 100%;
    input,textarea{
        @include contact_form_input_style;
    }
    textarea{
        resize: none;
        height: 100px;
    }
}
.name{
    display: flex;
    width: 100%;
    input{
        @include contact_form_input_style;
    }
}
}

<form method="post" action="" class="contact-form">
    <div class="name">
    <input type="text"/>
      <input type="text"/>
    </div>
    <div class="email">
    <input type="email"/>
    <textarea></textarea>
    </div>
    <input type="submit" value="submit" name="submit">
  </form>

Answer 1

将 .contact-form .email div 更改为 flex 这样 children 就不会超出 parent space

.contact {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
  width: 100%;
}

.contact-form {
  display: flex;
  width: 60%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.contact-form .name {
  display: flex;
  width: 100%;
}

.contact-form .name input {
  width: 100%;
  background-color: grey;
  border: none;
  border-radius: 10px;
  height: 50px;
  padding: 10px;
  margin: 10px;
}

.contact-form .email {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.contact-form .email input,
.contact-form .email textarea {
  background-color: grey;
  border: none;
  border-radius: 10px;
  height: 50px;
  padding: 10px;
  margin: 10px;
}

.contact-form .email textarea {
  resize: none;
  height: 100px;
}

<form method="post" action="" class="contact-form">
  <div class="name">
    <input type="text" />
    <input type="text" />
  </div>
  <div class="email">
    <input type="email" />
    <textarea></textarea>
  </div>
  <input type="submit" value="submit" name="submit">
</form>

HTML 表格有一个奇怪的偏移量

HTML form have a weird offset

html

css

sass