I used flexbox to design this project

@ChamuMutezva Thanks for the points. I will definitely solve the existing problems and update it.

@techanthere Hi, Thank you for your comment. I did all the steps you mentioned, but I do not know what the problem was. I did it again and updated the solution. i hope the problem was resolved.

@Atiyeh-dot I can see the live site now. You can update the screenshot of the solution by taking a new screenshot in solution page.

Hmm.. I think it's your first challenge, good job, you should also try order summary component challenge.

I have following suggestions on your solution:

1. Seems like you have not designed for mobile view, start developing mobile first design. Means first design for mobile view and then set a media query like min-width: 850px; etc. and start writing modifications for larger screens from there. Override or add only the properties which you think are different from the mobile view, this is obvious way though :)
2. First thing first, check the accessibility report and resolve the issues in code like here you have not used h1 while the text "Get insights that help your business grow." should be enclosed by h1 instead of a div and then it's fine to use span directly inside that h1 and p tag is not required then.
3. Don't use div around paragraph with class "sub-head" instead keep it a p tag only and remove all br inside the paragraph since they are not required at all especially when inside a single paragraph, if you want to align that paragraph correctly you can set some width and set it to number of characters like set the width property on this p tag to width: 20ch;.
4. You should use an unordered list here instead of div for the stats and category, as it semantically makes sense to set them as list of some items etc. Use ul and each stat and category is enclosed by a single list item (li) here and then you can use flex and set flex-direction: column;
5. Never use id for styling, instead use classes, as they make the code reusable and this approach is used in real life projects as well. Ids are used only when we need to play with the elements in Javascript or in case of aria-labelledby use etc.
6. Now let's come to the css; if it was me I would have placed the link tag above in the html with "style.css" file after all the link tags so that other styles are loaded first and then my stylesheet afterward.
7. Don't use px units for sizing instead rem or em units, rem more preferably. Especially, using px for height in body is a very bad approach.
8. I can see you have not used body selector but you should definitely place the initial styling in body selector tag. Like you can set the min-height:100vh; in body and some vertical and horizontal padding and everything aligns well, such as use padding:2rem; etc, this will center the content both horizontally and vertically. Remove right and width properties from body, they are not required at all especially after min-height and padding is set

I am pretty sure, this will solve most of the problems in the visual design of the solution. It's great you have started, don't get overwhelmed by many changes, you will improve with time. Just try applying the improvements gradually and you will see the difference.

And for further help you can ask on help room in frontend mentor slack channel as well. There are some great people out there who are ready to always help you.

Good luck :)

@techanthere Thanks for the points. I will definitely solve the existing problems and update it.

@ChamuMutezva Hi. Thank you for your comment! I updated the solution and I hope the problem was resolved. I will definitely follow the points you said in the next projects.