Survey Form, CSS Help

I’m redesigning some of my projects that I got to pass tests but wasn’t really happy with the end result.

In this survey form I can’t for the life of me figure out why my text inputs are extending outside of their content box. The space on the left and right of the transparent orange box should match, but its extending too far to the right.

I have tried searching around and most of the results say to use box-sizing: border-box. I’ve already set this on the body and even if I put it directly on the class (.form-control) it doesn’t fix it.

The width of the input is set to 100%, when I inspect and look at the parent container I can see it is extending outside the parent container.

Anyone know where I’m going wrong here?

It’s the padding on <input> that is causing your troubles. The browser isn’t including the padding when it calculates 100% width, so it first calculates the width and then adds the padding. You have two options:

  • For the width of the <input> use calc to subtract the side padding from 100%
  • Keep the width at 100% and set box-sizing: border-box on the <input>
1 Like

Thank you! Much appreciated.