3-column preview card using CSS Flexbox

• for your question on the .btn put a border as transparent with the same dimension as when hovered. eg border: 2px solid transparent; So when hovered its only the color that changes

There is still some work to be done , the display is not close to the design.

• i haven't bothered to look at desktop first since i started enjoying mobile first. Mobile first can help you to have less css code. @media (max-width: 1440px) and one of the code looked like the one below:

  main {
        display: flex;
        flex-direction: column;
        width: 300px;
    }

since the flex container is 300px wide , the one column will stretch up to a maximum width of 1440px making it difficult to match the design on desktop.

• change the media query to a max-width of about 50rem - and before i continue use rems instead of px.
• remove the fixed width from the following

main {
    display: flex;
   /* width: 800px; //remove this fixed from all its declaration
    min-height: 600px; */
}

• set a max-width on the card instead of the flex container

.sedan,
.suv,
.luxury {
    padding: 60px 40px;
    max-width: 327px; // just demo
}

that should give you a layout like from the design. Use flex methods to keep the site centered