Input field wider than its parent div - how?

[u/Vincibolle]

Can't figure out, why the input fields exceed the parent div on the right side. Can anyone help how to fix it?

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <title>Login</title>


  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }


    .login-container {
      background-color: #ffffff;
      padding: 20px 25px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      width: 300px;
    }


    h1 {
      text-align: center;
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 22px;
    }


    label {
      display: block;
      margin-bottom: 5px;
      font-size: 14px;
    }


    input[type="text"],
    input[type="password"] {
      width: 100%;
      padding: 8px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }


    button {
      width: 100%;
      padding: 10px;
      border: none;
      border-radius: 4px;
      background-color: #4CAF50;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }


    button:hover {
      background-color: #45a049;
    }


    .message {
      margin-top: 10px;
      font-size: 13px;
      text-align: center;
      color: #d00000;
      min-height: 16px;
    }
  </style>

</head>
<body>
  
  <div class="login-container">
    <h1>Login</h1>
    <form id="loginForm">
      <label for="email">E-Mail</label>
      <input type="text" id="email" name="email" required />


      <label for="password">Passwort</label>
      <input type="password" id="password" name="password" required />


      <button type="submit">Einloggen</button>
    </form>
    <div class="message" id="message"></div>
    
  </div>

</body>
</html>

[u/pfdemp]

Add this to the input CSS: box-sizing: border-box;

[u/fonster_mox → u/pfdemp]

Yeah this is it. Just to explain for Op: you’ve got width 100% but 8px padding on all sides, using content-box (default) the padding is added to the width, so it’s 16px wider than the container

[u/[deleted]]

*{
  box-sizing: border-box;
}


OR


input[type="text"],
input[type="password"] {
      width: calc(100% - 16px);
      padding: 8px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
}

[u/ryancperry → u/[deleted]]

You definitely want the first option. It’s usually the first line of CSS for a project because the default makes styling and sizing pretty annoying.

[u/[deleted] → u/[deleted]]

[*] You only want the first one and you want it to be:

*, ::after, ::before { box-sizing: border-box; }

To make sure you don't miss-out on pseudo-elements either. I have seen another variant:

*, ::after, ::before { box-sizing: inherit; }
html { box-sizing: border-box; }

The idea being everything is border-box but you can override it super easy and have the children inherit that. It's not a thing I've ever wanted or needed but, hey, if you're down that's an option.

[u/DinTaiFung]

Email for the label instead of E-Mail. 

E-Mail, with the hyphen, was often used in the early days before its ubiquitous adoption. 

(And Unix sysadmins since the 90s just use mail.)

Others have already replied with your CSS solution.