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.https://codepen.io/noblegas/pen/eYmBgEG
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…