Padding/border problem Survey Form Challenge

[LucaBRS]

Hi, i did understand and change some of the code in order to do some try.
The “basic” step for the HTML part are “ok”.
I do have a problem with the border/padding.
inside the div.form-group, there is the input padding that goes a little bit outside.
is there a reason for that ? did i miss something?
i link here the code pen : https://codepen.io/lucabrs/pen/YzEooMO
the lines in html file is 9 - 10 - 11

Code so far

HTML:

<form id="survey-form" action="">
        <div class="form-group">
            <label id="name-label" for="name">Name</label>
            <input 
                id="name"
                type="text"
                name="name"
                class="form-control"
                placeholder="Metti il nome" 
                required
            />
        </div>

CSS:

form {

    background: var(--color-darkblue-alpha);

    padding: 2.5rem 0.625rem;

    border-radius: 0.25rem;

  }

 

  .form-group {

    margin: 0 auto 1.25rem auto;

    padding: 0.25rem;

  }
.form-control {

    display: block;

    width: 100%;

    height: 2.375rem;

    color: #495057;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid #ced4da;

    border-radius: 0.25rem;

   

  }

Browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36 OPR/83.0.4254.70

Challenge: Build a Survey Form

Link to the challenge:

freeCodeCamp.org

[skamat]

The padding of the div is supposed to be outside the form controls only. It looks fine I guess.

[Stankle]

I think you can try this:

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

I try it in your code and it is working.
Detailed explanation is here from MDN.

[LucaBRS]

Thanks, it did work it was bothering me a lot

[Stankle]

I am happy to hear that. I think It is better to use it in all your projects otherwise It can be very difficult.