Build a Survey Form, button falls out of body

HTML-CSS
1

Hi all,

I’m nearly done with the Survey Form project challenge, and because I am relatively new, I position elements mainly on the axis, i.e. top: 30px, bottom: 50px etc (and I love me some negative values, I’ll tell you what).

The situation is, when I’m trying to position the button, because of said positioning “practices”, it falls out of the body and I cannot adjust the body’s height so that it could fit the button in. This is how I’ve coded the button:

#submit {
display: block;
position: relative;
top: 100px;
left: 400px;
}

How would you position it inside the body so that it doesn’t fall out?

https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form/

2

could you attach a link of your codepen ?

3

I just realized I didn’t have it attached, sorry. Here you go:

4

You could add a height attribute to #survey-form

#survey-form {
  border-radius: 3px;
  width: 70%;
  background-color: #fff;
  margin: 0 auto;
  padding: 15px;
  height: 950px;
}

But I would recommend to you using Flexbox or/and Grid for designing your layout, instead of adjusting every element manually using the top and right attribute.
If you look at your project on a mobile device you will see that the layout crashes.
Did you already finish the CSS Flexbox and CSS Grid challenges in the freeCodeCamp curriculum?

P.S.
You don’t have to manually define the head element in codepen. Codepen automatically links your files and you can adjust the meta element in the settings.

5

My frank opinion is that you need a full refractory of your html/css code. I’ve never seen so many negative values in margins, paddings, positioning values, etc. Negative values are worth to be used only in special cases but not all over.

My advice would be regarding style to not mix inline styling with external css styling because, at some point, you will loose control on what will be the combined style between your inline and external one applied to one element .

If you want to maintain the same html structure as you have used before, here a forked pen, “naked” of any css styling, be it inline or external.

Just read more about what html tags are considered inline and what are considered block tags and try to style them accordingly to your vision.

Don’t give up and happy coding.