3-coulumn-preview

👾Hello Miftah Arif, congratulations for your new solution!

Your solution its almost done and I’ve some tips to help you to improve it:

Remove the height from the container to keep it growing it automatically and allow the container align center in the mobile version. See your code with the changes below:

body {
    margin: 0;
    padding: 0;
    /* width: 100vw; */
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: hsl(0, 0%, 95%);
}


@media (max-width: 375px)
.container {
    display: flex;
    flex-direction: column;
    width: 300px;
}
.container {
    display: flex;
    flex-direction: row;
    width: 800px;
    /* height: 400px; */
}

You made your html structure entirely with div blocks but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use <article> instead of the <div>.

This article from Freecodecamp explains the main HTML semantic TAGS: https://www.freecodecamp.org/news/semantic-html5-elements/

✌️ I hope this helps you and happy coding!