Can someone help me center my website contents?

I am building a recipe blog website and I am trying to center my recipe cards in the middle of the screen, but I am getting an issue where my cards are asymmetrical and there is more space on one side than the other. Can someone help me figure out why they are asymmetrical and what I can add or take away to fix it?

Here is my GitHub repository:

This is what my website looks like right now:

I suggest use CSS Grid for this kind of layout as it’s much easier to place elements at right place.

Just think of CSS Grid as Jigsaw puzzle, where you need to place pieces at right places.

first of, nice looking website :slight_smile:
it looks centered to me, did you fix it already?

1 Like
  • You are supposed to have a single grid container with all the grid items inside that single grid. Right now each of the cards is inside its own grid container.

https://gridbyexample.com/examples/example28/

  • If you set flexbox on the body it will affect all the direct child elements, including the grid container. It is unlikely that you want to center all child elements inside the body on a real page.

  • Avoid using float for anything but its intended purpose of floating text around an element.

  • You are missing semicolons in the .card-btn selector after two of the properties.

1 Like

Ahh okay, I see. This helped a lot!