I’m currently working on the Tea Cozy Project in the full stack course and I’m running into the issue where I am unable to center my div/flex container horizontally. I have the horizontal margins set to auto but the container stills stays stuck to the left. Below is my code, if anyone has any idea why this might be or can suggest if I should looking somewhere else in my code I would greatly appreciate the help. Thanks!
CSS:
.trend-container {
display: inline-flex;
max-width: 1000px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 1px solid red;
margin: 40px auto;
}
HTML:
![Berries in tea]()
Fall Beery Blitz Tea
![Box of tea]()
Spiced Rum Tea
![Donut on a plate]()
Seasonal Donuts
![Donut on a plate]()
Myrtle Ave Tea
![Suagr aside tea]()
Bedford Bizarre Tea
Project URL: https://www.codecademy.com/paths/full-stack-engineer-career-path/tracks/fscp-22-making-a-website-responsive/modules/wdcp-22-layout-with-flexbox/projects/tea-cozy
I’m also doing the tea cozy project and am almost finished.
Have you used the google chrome dev inspector to see what css is actually being executed on the element in question? Many times I’ve thought the css I wrote was being used only to later see that some other css was actually overriding it.
If all that checks out then I’ve also found that by changing values in the inspector I could easily see what other values do vs the one’s I have to see if that makes a difference. So I would also try that approach as well.
Last, It looks like you’re doing the Tea of the Month section. One item you seem to be missing is the “flex-direction” - I would take a look at adding that as well.
John