HTML form have a weird offset-CodePudding

My HTML form looks so ugly because in last name it has right offset(I don't want that) image showing what I mean and I could not find any problems, maybe someone can help? Below I added HTML and SCSS code. Thank you for help.

.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="" >
    <div >
    <input type="text"/>
      <input type="text"/>
    </div>
    <div >
    <input type="email"/>
    <textarea></textarea>
    </div>
    <input type="submit" value="submit" name="submit">
  </form>

CodePudding user response：

Change the .contact-form .email div to flex so the children won't go outside the 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="" >
  <div >
    <input type="text" />
    <input type="text" />
  </div>
  <div >
    <input type="email" />
    <textarea></textarea>
  </div>
  <input type="submit" value="submit" name="submit">
</form>