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 
it looks centered to me, did you fix it already?
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.
Ahh okay, I see. This helped a lot!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
