@Hassiai
Posted
Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. The <div class="attribution"> should be out of <div class="container"> for more on semantic html visit https://web.dev/learn/html/semantic-html/
You forgot to give the body a background-image, with a background-size of contain and a background-repeat of no repeat.
To center .container on the page using flexbox, change the min-height value to 100vh. give the grid template rows a fixed value to stop the design from using the entire height of the page instead of 1fr
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
