Survey Form Project Help-Layout & Background

HTML-CSS
#1

Hey all,

This is the project I’m working on
https://codepen.io/yenseay/pen/oNzdZBg

& here is the one I’m basing the layout off of:
https://codepen.io/freeCodeCamp/pen/VPaoNP

I’m trying to figure out how the one I’m basing it off of got the dark purple background to be centered in the screen? I’m not sure if I should be using margin to apply to each selector to center it, and then change the background color to somehow also stay within those margins? Or if I should apply borders to the entire survey-form id to move everything besides the intro and force it closer to the center and then apply a background color?

Thank you. I know this isn’t necessary for the project but would like to challenge myself to code closer to what was given as a model example. Initially, I thought I should use flexbox to achieve this but then decided it’d be better not to? - Correct me if you think it’d be easier.

#2

You can use your browser’s dev tools inspector to view the CSS the original is using on the container div to center it. Or, if you really want to challenge yourself, read this:

#3

I can figure out how to center the text content, but I’m trying to figure out how to move the dark purple region closer, condensed into the center. I’m not sure if it would be also using the same methods, or if I should be messing around with margin and distance from the edge somehow.

#4

As I suggested, user your browser’s dev tools inspector on the original form you are emulating to see how they did it.

#5

That helps some, thanks. I had the full code available so I figured it’d be better to always look there instead of Inspecting with dev tools, but inspecting that made it look like it’s the padding. Will investigate more tomorrow, for now I snooze.