Skip to content
Submitted 12 months ago

four card feature using basic html and css

kwokkw•80
@kwokkw
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What is the best practice to center a card container with a max-width? Below is how I always do it.

body {
    display: grid;
    place-content: center;
}

However, when I put a max-width on the container, it always shifts to the left and leave a blank column on the right. Then I have to set margin-left and margin-right to auto to center the container. Any comment will be appreciated. Mahalo.

Community feedback

  • Kimo Spark•2,190
    @kimodev1990Posted 12 months ago
    • To center your container in the middle of your website:-
    body {
display : flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

    Your container ( which is child relative to body ) will be centered.

    Hope you find this useful & helpful.

    Other than that, Nice work and keep going on.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

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