Semantic HTML5 markup, Flexbox Responsive shopping product card

Hello @xTolux001 👋. Congratulations on successfully completing the challenge! 🎉

• I have other recommendations regarding your code that I believe will be of great interest to you.

CSS 🎨:

• Looks like the component has been centered correctly. But the issue why the component is pushed from top because of margin.

• We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding will not dynamical centers our component at all states, You already centered the component correctly. Now all you wanna do is just remove the following style rule

body {
   margin: 50px auto;
}

• Now your component has been properly centered

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Hello @0xAbdulKhalid, So I was able to take your advice and I worked on another challenge . Please is their any other thing I can improve in this challenge that I didn't do