How to align this item horizontally within the flex container?

Hi,
First of all the link to my site:
https://christophgrothe.github.io/plants/

At the bottom of the site you find three pics. The one in the middle, the smallest one, is the one I have a problem with.

It’s in a flex container and I want to align it horizontally. More concrete, I wanna move it to the left side of the container. So if there would be a property like this, I would like to say “justify-self: start” (I know, there isn’t).

I tried to move the pic with justify-content: start/ flex-start, however: No movement either. So can anybody tell me what I am doing wrong?

Best wishes,
Chris

Hi Chris,
check your DOM structure: You grouped only two of the images and the related headlines in a div container. The plant on the left (plants with a tribe) is outside.
I’m not really used to css grids and I think you make your life a bit harder using it here. If you used flexboxes only, I think you could more easily achieve your aspired layout + responsiveness will be easier.
Not entirely sure what you want it to look like: Headlines at the top and pics at the bottom line?
Then group each image and its related headline in a div, set that to

display: flex;
flex-direction: column;
justify-content: space-between;

The parent container needs to be

display: flex; 
align-items: stretch;
1 Like

Hey @mirja_t , Thanks so much for your answer!

1 Like