@Hassiai
Posted
Replace <div class="container"> with the footer tag to make the content/page accessible. click here for more on web-accessibility and semantic html There is no need to give the body a padding value.
To center .container on the page using flexbox, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
For a responsive content there is no need to give .container, .image , .content and the img a max-height. Rather give .container a fixed max-width value, .image and .content a width of 50% in the desktop design and 100% in the media query for the mobile design.
Give .content the same padding value for all the sides , this will prevent the content from overflowing on smaller creens and give the img a max-width of 100%.
Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
