Centering container - https://github.com/iDuvancho303/Tea-Cozy-Project

I would like to center the class=“trend-container” to the middle of the page.

Not sure what I am missing on my CSS file. This is what I have so far:

.trend-container {

display: inline-flex;

max-width: 1000px;

height: auto;

flex-wrap: wrap;

align-items: center;

justify-content: center;

}

.trend img {

height: 200px;

width: 300px;

padding: 10px 10px;

}

Any ideas or suggestions are much appreciated.Processing: tea cozy.PNG…

Rather than posting a snippet of your code it’s better to see a live version of your code, this way we can spot any potential issues.
On a side note, if this is one of the projects, the projects that you submit must be a live version. Not just the code.

Also, I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

You are centering the content inside the container, not the container.

Seeing as you already have given it a max-width all you should need is an auto margin.

margin: 0 auto;

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.