Why is my container not the same size of its content?

Question

As you can see in the image below, my container is bigger than its content. The input has a width of 500px, but somehow my container has 510px.

If I manually set my container to 500px, it works fine, however I don't think it is the way to go, as I think it should automatically have the same size of its content.

Am I missing something or is this behavior expected?

Container bigger than content - Image

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

body {
    font-family: 'Open Sans', 'sans-serif';
    color: #5e665e;
    box-sizing: border-box;
    background: #F7F7F7;
}

.form {
    width: 650px;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin: 0 auto;
    padding: 76px 70px;
    margin-top: 50px;
}

.form__title {
    text-align: center;
    color: #339133;
    font-family: 'Lato', serif;
    font-size: 48px;
}

.form__container {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form__item:not(:last-of-type) {
    margin-bottom: 36px;
}

.form__item:is(:last-of-type) {
    margin-bottom: 46px;
}

.form__label {
    margin-bottom: 8px;
    font-weight: bold;
}

.form__input {
    height: 42px;
    width: 500px;
    padding: 15px;
    border-radius: 5px;
    border: none;
    background: #F0F5F0;
    color: #5e665e;
}

.form__input::placeholder {
    color: #989e98;
}

.form__input:focus:invalid {
    border-radius: 5px 5px 0 0;
    box-shadow: 0 2px #cc3131;
}

.form__input:valid {
    border-radius: 5px 5px 0 0;
    box-shadow: 0 2px #39b031;
}

.form__input:focus {
    outline: none;
}

.form__button {
    width: 500px;
    height: 50px;
    border-radius: 10px;
    background: #339133;
    color: #F7FAF5;
    border: none;
}

.form__button:hover {
    cursor: pointer;
    background: #32AD32;
}

<form action="#" class="form">
    <h1 class="form__title">Create your account</h2>

        <div class="form__container">
            <div class="form__item">
                <label for="username" class="form__label">User</label>
                <input type="text" class="form__input" id="username" placeholder="John Smith" minlength="4" maxlength="70"
                       required>
            </div>

            <div class="form__item">
                <label for="email" class="form__label">Email</label>
                <input type="email" class="form__input" id="email" placeholder="[email protected]" minlength="8"
                       maxlength="320" required>
            </div>

            <div class="form__item">
                <label for="password" class="form__label">Password</label>
                <input type="password" class="form__input" id="password" placeholder="********" minlength="8" maxlength="32"
                       required>
            </div>

            <div class="form__item">
                <label for="confirm-password" class="form__label">Confirm Password</label>
                <input type="password" class="form__input" id="confirm-password" placeholder="********" minlength="8"
                       maxlength="32" required>
            </div>
            <button class="form__button" type="submit">Submit</button>
        </div>
</form>

Answer 1

Your .form selector has a total width (border + padding + content) of 650px minus padding-left of 70px minus padding-right of 70px which gives a content width of 510px.

.form {
    width: 650px;
    background: #ffffff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    margin: 0 auto;
    padding: 76px 70px;
    margin-top: 50px;
}

If you do padding: 76px 75px; it should work.