Survey Form Challenge - Submit Button, Formatting Issues

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

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:

Which part of your current CSS code do you think should be centering the Submit button but is not?

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!

Randell,

My thinking is that the line:

justify-content: center;

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

Because your code is not indented, it may be hard to see the only element inside your div with class=“container” is the form element, so that is the only element that will be centered.

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.

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;

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?

Properties are inherited down through parents and apply to children (all the way down) when applicable. The key here is “when applicable”. Only elements with display:flex can inherit justify-content: center or flex-direction: row. Since the form element did not have the display:flex added to it, it did not apply.

1 Like

Understood. Thanks for the clarification!