Flexbox properties don't work in one of the containers

[ivelin]

Hello, everyone.

I want to distribute the free space between two elements in a container with flex box, but I do some wrong.

The flex box is supposed to make the h3 and p centered along the main axis (grid-direction is column). However, whatever value I type, the h3 and p doesn’t move in any direction.

I tried to fix it with align-content, but still nothing happens.

My code:
HTML:

div class=“ingrid-text”>

           <h3>Free shipping</h3>
           <p>We make sure you recieve your cake as soon as we have finished making it.>>  ></p>

/div>

CSS:
.ingrid-text{
display: flex;
flex-direction:column;
justify-content: center;
}

Link to Codepen.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15

Challenge: Build a Product Landing Page

[Jaydog]

Try align items center rather than content, you have switched the axis with flex direction column so justify works top to bottom

[ivelin]

I tried that, but it doesn’t work.

[Jaydog]

It worked when I just did it, it moved the contents of .ingrid -text to the center.

[Annestezia]

Just guessing here: try to apply text-align: center, is this what you’re looking for?

[Jaydog]

text align center works also, either work when I try them on this code

[ivelin]

Maybe the browser is playing tricks, because I am on a friend’s MacBook.
I will try on my pc. Hope this is the problem.

[Jaydog]

Could be browser.
In .ingrid-text the justify content center isn’t doing anything so it could go but the align-content:center; can just be switched to align-items:center; or as @Annestezia said text-align also works.
I always struggle to remember which justify or align I need and whether it’s items or content. Sometimes it’s just trial and error until it works.
Page is looking good by the way

[ivelin]

Thank you very much.