HTML form have a weird offset - html

Question

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="" 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

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="" 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>