Flex items aren't centering within container? - css

Question

I'm attempting to center the flex items, however I must be doing something wrong because it isn't working. The basic outline is that Timeline-Container holds 3 smaller containers (TL-1,TL-2, etc). Everything is working fine between the parent container and the children container (meaning that all the TL-# containers are centered correctly with flex), however none of the items within the TL-# containers are centering.
I've tried "justify-content: center;" and it isn't affecting anything.
<div id="Timeline-Container">
<div id="TL-1">
<img src="Photos/2018 SB Photos/Lighted_Stadium_1.JPG">
<p>Caption 1</p>
</div>
<div id="TL-2">
<img src="Photos/2018 SB Photos/Lighted_Stadium_2.JPG">
<p>Caption 2</p>
</div>
<div id="TL-3">
<img src="Photos/2018 SB Photos/Lighted_Stadium_3.JPG">
<p>Caption 3</p>
</div>
</div>
#Timeline-Container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
}
#Timeline-Container img {
height: 35%;
width: 35%;
border: 5px solid #cccccc;
}
#TL-1 {
/*Parent Flex Code*/
display: flex;
flex-direction: column;
justify-content: center;
align-items; center;
/*Child Flex Code*/
order: 1;
}
#TL-2 {
/*Parent Flex Code*/
display: flex;
flex-direction: column;
justify-content: center;
align-items; center;
/*Child Flex Code*/
order: 2;
}
#TL-3 {
/*Parent Flex Code*/
display: flex;
flex-direction: column;
justify-content: center;
align-items; center;
/*Child Flex Code*/
order: 3;
}

Answer 1

You have a typo align-items; center; which has a semi-colon instead of align-items: center; which has a colon. Here is a code pen: https://codepen.io/the_legitTDM/pen/NQXPWv
FYI: There is added margin for better viewing

Answer 2

The justify-content rule only works on actual flex items. Flex items are elements whose immediate parent has display: flex; set. So if you want to center the content in your #TL-? items usinf flexbox rules, you will need to add display: flex to them as well.
My favorite flexbox resource, helps the concepts just make sense: https://css-tricks.com/snippets/css/a-guide-to-flexbox/