A CSS grid mystery: padding in grid items

Question

Okay then, so I made a nice-looking email-me form using CSS grids. Everything's fine and dandy except when I try to apply some padding on the form elements. Things then start to flow out of the grid.

It seems like the grid system doesn't take padding inside the elements into account when it calculates the final size of the grid items. I tried using fr-s and auto for the width of these elements, and all sorts of useless hacks, but nothing really works.

Here's the code and some screenshots to help you all feel my pain. :D

Without padding in the input fields: https://i.sstatic.net/L9uy1.jpg and https://i.sstatic.net/dQCFm.jpg

With padding: https://i.sstatic.net/xBeDo.jpg and https://i.sstatic.net/1dk1l.jpg

<form id="email">
<div class="form-group" id="form-name">
    <label for="name-field">Name</label>
    <input type="text" name="name-field" id="name-field" required>
</div>
<div class="form-group" id="form-address">
    <label for="address-field">Email Address</label>
    <input type="text" name="address-field" id="address-field" required>
</div>
<div class="form-group" id="form-message">
    <label for="message-field">Message</label>
    <textarea name="message-field" id="message-field" cols="32" rows="8" required></textarea>
</div>
<button id="send-button" type="submit" form="email" name="send-it">Send it</button>

And the CSS:

#email {
    display: grid;
    grid-gap: 2rem;
    grid-template-areas:
    "name address"
    "message message"
    "send send";
    grid-template-columns: 1fr 1fr;
    justify-items: start;
    margin: 1rem auto 0 auto;
    width: 80%;
}

#form-name {
    grid-area: name;
}

#form-address {
    grid-area: address;
}

#form-message {
    grid-area: message;
}

.form-group * {
    display: block;
}

#form-name, #form-address, #form-message {
    width: 100%;
}

#name-field, #address-field, #message-field {
    width: 100%;
}

#name-field, #address-field, #message-field {
    padding: 0.75rem 1.5rem;
}

Answer 1

Add this to the top of your code

*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}