Tea Cozy - help - how to center the background images and position the tea of the month images?

[carlalua]

Hello, I’ve spent a long time on the tea cozy project and there are some bits I can’t figure out.

First I can’t get the ‘our mission’ and ‘locations’ sections to display horizontally centered on the screen. My Screen is wider than those sections and they sit to the left of my screen.

Secondly I can’t get the tea of the month images to sit as a row of 3 and then 2. I feel like it should work with flex wrap but it doesn’t. Any ideas?

this is the project so far on my Git page
https://carlalua.github.io/teacosy/

and here is my repo to view the code.

GitHub - CarlaLua/teacosy: Codecademy project

If anyone can help I’m really stuck.

[kirativewd]

Hi there!

I think (don’t quote me ), the CSS courses cover how to center an element horizontally without flex. To give you a hint, it has to do with margins.

The tea of the month section is different. Most elements have inherent styles applied to them by the browser’s user agent stylesheet. If you use the browser to inspect that section, you will see that each figure has inline margins of 1m and block margins of 40px. The margins increase their width, making them wrap before you’d want them to.

If the margins are removed, then the figures come together and all that’s left is getting them appropriately spaced and justified.

I hope this helps!

[carlalua]

Thankyou so much!! I will give this a try.