My code is as follows for the body:
body{ background-color: hsl(212, 45%, 89%) ; min-height: 100vh; display: grid; place-content: center;
It seems to be properly centered with Live Server but it displays differently with the Github link.
@kkhwjnrk
Posted
To properly center the content, you can move the properties from the body element to the main element and adjust the min-height: 90vh;. Additionally, you may need to reduce the top margin on the .attribution
body {
background-color: hsl(212, 45%, 89%);
}
main {
min-height: 90vh;
display: grid;
place-items: center;
}
Marked as helpful
@CNash23
Posted
At least the reporter found no issues. The first time I did this challenge I think it was centered better when I used margins. So I wonder what the issue could be. This is the author of this challenge project CNash23.
@atif-dev
Posted
@CNash23 Probably, you didn't change the code in GitHub repository... In body selector replace place-items: center; with place-content: center; and in .attribution selector remove margin-top: 6.25rem; After doing changes card will be centered.
Marked as helpful
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
