display: flex; justify-content: center;

Hello Apo, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!

to solve this problem do this:

<a href="/">Learn More</a>

A document ought to have one primary landmark, and the absence of a main tag around the page's primary content is the root of this issue. On this page, there is no other element that is more important than the one that this challenge is based on, so to solve it, wrap all the content in the'main' tag.

It's always a good idea to pay close attention to the proper use of semantic html elements because they are crucial for screen reader users to understand what the main content of the page is in the case of the'main' tag!

The remainder is excellent.

I hope it's useful. 👍

Looks cool actually. The only thing I would change besides responsiveness is that I would improve the color of the buttons when you hover over them and add transitions. Also, to remove the report issues use main tag instead of div with the class main-container

Hello Apo, Hope you are doing well. You did great so far in this project, however I have some tips regarding your question.

1. Use this for responsivness,

@media (max-width:1439px){
    .main-container{
         display: flex;
         flex-direction: column;
     }
    /* add your codes */
}

1. Start your project with a mobile first approach. Build the mobile view first, then change it using media query for different screen-size. However, this approach varies people to people, but I think mobile first approach is more efficient to build any project.

You can check my solution of this project as a reference. Feel free to ask questions. Happy coding.