A Blog Preview Using CSS FlexBox

Hello Aisha! Your solution looks great and almost like the design. Great job 👏

I might have a few suggestions for you to improve it:

• Set a 100svh size for the body's min-height property so that it covers the whole screen and help you center your card in the middle of it.
• You can use Grid for the body to center your card since you can do it with only 2 lines of code.
• You don't need to set a display of flex and a flex direction of column on the card's container since the content is stacking by default on top of each other.
• You can use max-width: 100% and display:block rules for all the image elements whenever you start a website from scratch. This makes the images be more responsive on different screen sizes.
• For your div container, you can set a max-width instead of a normal width. That way, you allow your image to shrink for small devices and cannot grow more than the max-width value you set.
• For your problem, to put the profile picture image and the name together, remove the justify-content:space-between. This will put your flex items at the far edges of the card. Just use align-items: center and add a gap of 1rem.

Hope this information helped you 😊

Happy coding!

Just make the body display flex and then justify content centre and align item centre. It will make your card to go on centre both horizontally and vertically