Align items property not working

My other flex properties like justify content seems to work but my align items property does not. My align items property doesn’t work for flex end nor center when I assign those values to it.

Sure it does. You just haven’t given the banner element a height. So it’s exactly the height of the banner container. give .banner a decent height, you’ll see your .banner-container element fall into place.

Before you do that, if you’re not comfortable using the element inspector (which I highly recommend - dev tools on whatever browser are VITAL!), then give the .banner element a border, something to show you what space that element is actually consuming. You’ll see, it’s exactly the height of the element it contains.

Of course, you don’t have display: flex on your header, if that’s the one you expect to push the banner element down…