I think I know what I should do but can't figure out how

https://codepen.io/md9453201/pen/JjoOxvL Using flex box I can move the body of my form onto the background image, but the header doesn’t move with it. I need to unify the header and the body of the form but nothing I’ve tried has worked. Hints?

  1. <body> should be around <main>
  2. add this to #main in your CSS:
  display: flex;
  flex-direction: column;
  align-items: center;

Thank you. That did it. “Column” and “row” make me feel dyslexic. It just seems backwards [to me].
But thank you very much. I have been banging against this all day.

PS What do mean by “body” should be around “main”?

The body element should contain the main element.

<!DOCTYPE html>
<html lang="en">
	...rest of html

On Codepen you don’t actually need the <html> and <body> elements.