@Hassiai
Posted
Replace <div class="container"> with the main tag and <div class="footer"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/
Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. instead of giving .container a margin value to center it.
Increase the width value of .container to 600px. There is no need to five .container a margin value and a padding value
in the media query give .container a width of 90% instead 1000px and display: block; instead of display: grid and display: flex.
Hope am helpful HAPPY CODING
Marked as helpful
@Saguneo
Posted
@Hassiai
Notes taken. Thank you for the feedback and resources, those links are definitely going to help me out in the future!
@Hassiai
Posted
@Saguneo if you find my comment helpful, mark it as helpful