order-summary

👋 Hey, @AbdelnaeemOsama! I have a few suggestions for your project:

1. Use display: flex for the body like this:

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

This will make it easier to center all the content, and you won't have to use margin: auto, which only centers the content horizontally.

2. You could add the background image to the body using the background property:

body {
  background: url(path/to/bg-image.png);
  background-repeat: no-repeat;
}

If you want to dive deeper into learning Flexbox, here is a great link from MDN. For an interactive way of learning Flexbox properties, check out Flexbox Froggy.

Keep up the fantastic work! 💪

I hope you find this helpful. 😊