Display:flex not working for footer

Here’s my pen https://codepen.io/navdeepio/pen/KLqxOy?editors=1100

the footer isn’t centered, although everything else is…

let me see how you did it so that i can help you

I think you need to specify a section, footer or something like this in the css.

display is used for layout, if you want to center your content you have to use something else like text-align or justify-content.

  1. Remember only direct children of the flex container are flex children. You have set the body as a flex container and the only child is the main element.

  2. Next when using flex-direction: column; the properties use for centering switches around. (align-items: center; vs justify-content: center;)

main {
  display: flex;
  flex-direction: column;
  align-items: center;

try using float to align it to center