@Hassiai
Posted
Replace <div class="outerbox"> with the main tag. to fix the accessibility issue. for more on semantic html visit https://web.dev/learn/html/semantic-html/
Give . container a height of or auto or no height value to prevent the content from overflowing on smaller screens.
In the media query , reduce the screen size of the media query and give the width a fixed value instead of a percentage value. for a responsive width replace the width of .container with a max-width. e.g:
@media (max-width:600px){
.container{
max-width: 25em;
}
}
Remember to always use em and rem as unit for the width, margin and padding values. for more on this watch this https://youtu.be/N5wpD9Ov_To
Hope am Helpful. HAPPY CODING