输入类型有100％的宽度，并在父div内

我有一个输入的电子邮件和密码和其他一些按钮的形式。输入类型有100％的宽度，并在父div内

HTML：

<div id="login-form"> 
<form> 
    <input type="email" placeholder="Email" id="email" name="email_phone"> 
    <br> 
    <input type="password" placeholder="Password" id="password" name="password"> 
    <br> 
    <button id="login-submit">Submit</button> 
    <br> 
    <button id="login-forgot">Forgot Password</button> 
</form> 
<br> 
<br> 
<center> 
    <p>Don't have an account?</p> 
</center> 
<button id="create-new-account">Create Account Now</button> 
</div>

我所需要的输入和按钮成为父的100％的宽度。和有10px的填充。

#login-form input[type=email], #login-form input[type=password] { 
    width: 100%; 
    font-size: 14pt; 
    border: none; 
    outline: none; 
    padding: 10px; 
} 

#login-form button { 
    width: 100%; 
    border: none; 
    color: white; 
    font-size: 14pt; 
    padding: 10px; 
    margin-top: 10px; 
    border-radius: 4px; 
    cursor: pointer; 
}

然后问题从输入宽度开始。所有按钮都在父元素内，但输入框与父div交叉。就像这样：