輸入類型有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交叉。就像這樣：