Padding/border problem Survey Form Challenge

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 :
the lines in html file is 9 - 10 - 11

Code so far


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


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:

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

1 Like

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.

1 Like

Thanks, it did work :slight_smile: it was bothering me a lot

1 Like

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

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.