Survey Form Project - Question on Styling Form Controls

Hi, I am trying to recreate the project example for the Survey Form project. I am having a problem getting even margins for my text inputs. I have each text input inside a div of class “form-group” with this styling:

padding-bottom: 25px;
width: 100%;
margin: auto;

then each text input is styled with this definition:

#name, #email, #number{
width: 100%;
height: 30px;
padding: 5px;
font-size: 1.1rem;
border-radius: 5px;

The problem is the form control overflows the parent container when the width property is at 100%. Here is my codepen, I set the padding of the parent container to 0 to illustrate.

1 Like

Hey Raymond,

nice to meet you! :wave:

I just replied to a very similar question:

Let us know if this helps. :slightly_smiling_face:

And please use the “preformatted text” tool in the editor ( </> ) to add code.

Thanks for pointing me in the right direction, works great now. I read about the border-box property on this short tutorial, but the reading the documentation helped me understand.