title: Input type to have width of 100% and be inside parent div
body: <p>I have a form with input for an email and password and some other buttons.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div  id="login-form"&gt;
  &lt;form&gt;
      &lt;input type="email" placeholder="Email" id="email" name="email_phone"&gt;
      &lt;br&gt;
      &lt;input type="password" placeholder="Password" id="password" name="password"&gt;
      &lt;br&gt;
      &lt;button id="login-submit"&gt;Submit&lt;/button&gt;
      &lt;br&gt;
      &lt;button id="login-forgot"&gt;Forgot Password&lt;/button&gt;
  &lt;/form&gt;
  &lt;br&gt;
  &lt;br&gt;
  &lt;center&gt;
      &lt;p&gt;Don't have an account?&lt;/p&gt;
  &lt;/center&gt;
  &lt;button id="create-new-account"&gt;Create Account Now&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need the input and buttons to be 100% width of the parent. <strong>And</strong> have a padding of 10px.</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>Then the problem starts with the input width. All the buttons are inside the parent element, but the input box cross the parent div. Like this:</p>
  
  <p><a href="https://i.stack.imgur.com/R9L0T.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R9L0T.jpg" alt="enter image description here"></a></p>
  
  <p><a href="http://codepen.io/Kakar/pen/KzGOVp" rel="nofollow noreferrer">demo at Codepen</a>.</p>
  
  <p><strong>How do I keep the input box inside the parent div and have a width of 100% and still have padding</strong>?</p>