@eleswastaken
Posted
Hey!
That's right there is a better way to center something. It is flexbox. Use this to a container of whatever you want to center:
display: flex;
justify-content: center; // center elements horizontally
align-items: center; // center vertically
Side notes:
When you see something that changes states on the design, it almost always means it is supposed to be interactive. It could be a button, or a link, or any kind of interactive element. So in your case, you would expect the preview image or card title to take you somewhere, to the Learn more about... for instance. The same is true for the profile elements, the name and avatar; again you would want to learn more about the author when you clicked on it. So make the image container, title, author's name and profile pic links.
You didn't have to position the .card and transform it. If you wanted to set some spacing, use padding: XXpx; on the parent element, or margin: XXpx; on the element itself(i highly suggest you google it all).
Also when doing challenges like these, remember that they are part of a bigger webpage, meaning the layout should be done accordingly.
Best of luck!
Marked as helpful
