CSS, overlay, variables, flexbox

Hey, good job taking on this challenge!

In order to have a circular border when the border-radius is applied, the image will need to be square. Since this particular challenge doesn't require responsiveness, I would recommend setting a fixed width and height for your image. For example:

.creator img { width: 40px; height: 40px; border-radius: 100%; }

For the card size, there are a few different ways you could go about it. One possibility is to use a fixed pixel size for the width and padding instead of using percentage.

Example: main { width: 300px; padding: 15px; }