Survey Form Challenge - Submit Button, Formatting Issues

HTML-CSS
1

Hi Guys, my first post!

I am working through the Survey Form Challenge and encountering a problem while tidying up the look of the page.

My project: https://codepen.io/rorochaudhary/pen/ZRLzyw

Submit Button - I have my animated submit button at the bottom of my div, however, I am unable to center it.

Initially, I tried using margin: auto; with no change. position: absolute; with offsets, worked but the button is removed from within the div entirely. It appears to move using margin: 0 50% 0 50%; but within the full view, the button still does not appear centered.

The button is nested within class=“container”. on CSS, .container is styled as such:

.container{
  display: flex;
  justify-content: center;
  flex-direction: row;
}

Any advice? An explanation about the concepts behind it or topics to look up for understanding would be great. Thanks!

1 Like
2

Hello there. As I can see you have written container instead of .container since you said that container is a class. That might fix the problem. :slight_smile:

4

Andrew,

I typed up the code and forgot the period in front, I double checked my CodePen and it is .container, not container.

I edited my post to be clear there.

Thanks!

5

Randell,

My thinking is that the line:

justify-content: center;

Would center all elements within its container, including the nested button.

7

Randell,

I went through and indented the code for organization, thanks. The text cursor shows that the button is nested within the form element itself, and within div class=“container” as well.

8

Yes, but the css you wrote only applies to the direct children of the div with class=“container”, because the form itself does not have the display:flex property;

9

Ahhh, understood! After moving it outside of the form element but within “container” it resolved. This may be a basic/fundamental question, but does the reasoning you provided apply with all CSS? Any code written affects only the direct children?

11

Understood. Thanks for the clarification!