HTML, CSS

Hey just saw your solution, again amazing work. 👍 Just a few tips to help with your work

• First use

• body{ Display: flex Align-items: center; Justify-content: center; } Or you can use this *body{ Position: relative; } *container{ position: absolute; Top: 50%; Left:50% Transform: translate(-50%, -50%); } This will center your container in your page properly.

• Secondly to make the last two containers responsive for mobile use this

• create a grid container and two grid items .Grid-container{ Display-grid: grid; Grid-template-column: repeat(2,1fr); Grid-auto-rows: minmax(100px,auto); (This is to make the container responsive). } Within the grid-item containers you made put the content meant from the green boxes there.

• lastly add a media query for the responsiveness, and target the grid- container class giving it a display of block. With this you have an improved solution. Hope this helped happy coding 👍👨🏾‍💻

Hi @thresholdtech, congratulations on completing this challenge, nice work you have done here. Here are a few suggestions on the accessibility of your code:

• Your <div class="main-page"></div> should be wrapped in a <main></main> tag for easy recognition by the any web browser, it stands out as the main content of the webpage according to markup rules or rather rename the div to main.
• And you could center your "main-page" by writing this: {position: absolute; top: 50%, left: 50%, transform: translate(-50%, -50%)}

Great Work @thresholdtech, Keep Coding