Survey Form alignment - responsive design project 2

Survey Form alignment - responsive design project 2
0

Hi everyone! The alignment is all messed up in my form. The labels and the input fields are all over the place. I have been looking at other’s solutions but I still wasn’t able to figure it out. I appreciate your help!

https://codepen.io/norasarga/pen/agvgNE

Don’t know why you used so much padding and margin. If you use full page view and put your mouse cursor over the center of the form then scroll down slowly carefully comparing the symmetry, you’ll see that everything is centered the variation comes from the length of the text near the inputs. When you get to the checkboxes you split the form (which you gave a width of 800px + padding) into two 400px wide sections in which the content is centered in their respective boxes.
You can try and untangle it, now that you know what’s wrong. Or you can get rid of all margin, padding, height: auto; and center the biggest pieces first then work your way to the smallest.