Unable to center flex container

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