Survey Form Project - Question on Styling Form Controls

[rwolt]

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:

.form-group{
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.

Survey Form

[miku86]

Hey Raymond,

nice to meet you!

I just replied to a very similar question:

Product Landing Page: Presentino

Hey there, nice to meet you! There is a CSS property called box-sizing. The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not. Source The default value of this attribute is: content-box: Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included. When you use width: 100% on your input, you give your input content the width 100% a…

Let us know if this helps.

---

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

[rwolt]

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.