3-column-preview-card-component-main

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

body{ background-color: hsl(0,0%,95%); height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; } replace the "height:100vh" with "min-height:100vh" "width:100%" with "max-width:1440px"

Then add margin:0 auto;

Trying to make pages responsive depends on how good you are with the Google Chrome inspect feature If you are good with the Google Chrome inspect feature then all you have to do is write the code for various screen sizes

@ media only screen and (min-width:300px) and (max-width:320px){

} Copy and paste your CSS code in between the braces Use Google Chrome inspect feature to make it responsive on 320px screens If this isn't clear I'll explain better I can put you through media queries You can as well go through my code and check out how i wrote media queries code for various screen sizes