How to align the testimonial cards as per the design? (I tried the margin-top option but it will only shrink my card)
While testing the responsiveness of the page I noticed that around 400px the rating sections do not wrap while other contents shrink. What might be the reason?
Regarding your first question: if I remember correctly, when I was doing this challenge I positioned the cards by setting the first and the third cards' position to relative and then adding some pixels to top and bottom respectively.
As to your second question, I think it's the margins on "ratings-1,2,3" elements that cause the trouble when the window width goes below 400px. Once I set them to auto, the problem seems to be gone.
On a side note: I highly reccomend learning and adapting a css naming convention, it can really help a lot when your projects get bigger. It also helps you write cleaner and more systematised code that's easier to review. Personally, I decided to apply BEM (block - element - modifier) to my css and I must say that I'm much more satisfied with my css since!