@nicodes-dev
Posted
Hi George! Your mistake is using percentage in the max-width of your content class. I suggest that you use a fixed unit in your max-width.
@media (min-width: 440px) {
//other styles
.content {
max-width: 500px; //you can also use rem, em
}
}
You can also use clamp in your width, then you won't need to add a media query for it.
// clamp(MIN, VAL, MAX)
width: clamp(300px, 90%, 500px);
You can learn more about clamp in the official docs. clamp
You also need to add a <main> tag in your solution. You can just replace the div tag of your content class.
<main class="content">
....
</main>
Feel free to ask if you have any question.