# Survey Form alignment - responsive design project 2

**URL:** <https://forum.freecodecamp.org/t/survey-form-alignment-responsive-design-project-2/284059>\
**Category:** General\
**Created:** [June 14, 2019, 6:33pm UTC](https://forum.freecodecamp.org/t/survey-form-alignment-responsive-design-project-2/284059 "2019-06-14T18:33:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![norasarga](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/norasarga/32/117000_2.png) [@norasarga](https://forum.freecodecamp.org/u/norasarga)\
**Post date:** [June 14, 2019, 6:33pm UTC](https://forum.freecodecamp.org/t/survey-form-alignment-responsive-design-project-2/284059/1 "2019-06-14T18:33:51Z")

</div>

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](https://codepen.io/norasarga/pen/agvgNE)

---

<div class="post-metadata">

**Author:** ![tlc35us](https://avatars.discourse-cdn.com/v4/letter/t/c77e96/32.png) [@tlc35us](https://forum.freecodecamp.org/u/tlc35us)\
**Post date:** [June 26, 2019, 7:01am UTC](https://forum.freecodecamp.org/t/survey-form-alignment-responsive-design-project-2/284059/2 "2019-06-26T07:01:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:34am UTC](https://forum.freecodecamp.org/t/survey-form-alignment-responsive-design-project-2/284059/3 "2021-01-17T09:34:37Z")

</div>

Closed on January 17, 2021, 9:34am UTC


