I am a newbie i used css flexbox and media qureys for this project.

Hello everything is fine?

I really liked the result of your project, you said you are a beginner, but you really did a good job. I have some tips for you:

1- You can choose the height in different ways and different measurement units, but really the most suitable is min-height: 100vh;, but it has reasons to be considered the best way, one of them for example is that the 100vh completely fills the screen regardless of screen size.

I advise you to color your body min-height: 100vh; and adjust the elements, you will get a better result.

Hope it helps... 👍

👾Hello @ayush111222, congratulations for your new solution!

Your solution is great but you're having some issues, because you've set the container size in the body, you need to replace all these values. I'll give you the step-by-step used to create my solution with grid and the alingment.

First of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

To build this component with 2 columns all you need to do is create a main block to hold all the content (you can use <main> to wrap), set its width as max-width: 900px (it's the container size) and display: grid / grid-template-column: 1fr 1fr(this means that your component will have two columns with 50% of the container width each thats 450px).

👋 I hope this helps you and happy coding!