3 columns

Community feedback

• 

  T.Praveen•870

  @gwtpraveenPosted over 2 years ago

  Congratulation on completing the challenge

  to put the container middle on the screen try this

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  
  

  From your code

      .contenair {
      display: flex;
      flex-direction: row; 
  }
  

  • default flex-direction value is row so in this case, you don't need to set it.

  flexbox CSS-TRICK - a complete guide to flexbox

  Keep up the good work!!

  Marked as helpful

  0

  ---

  

  Fetra•40

  @SupafeiPosted over 2 years ago

  @Tim5583 Thank you! My page is now centered.

  0
• 

  Michael Waaler•230

  @10highPosted over 2 years ago

  To center your flexbox, you need to put it inside another flexbox and justify-content and align-items to center. You should set the min-height of your body to 100vh.

  Have a look at my solution to see how: https://www.frontendmentor.io/solutions/responsive-3column-card-html-and-css-7R3-nlUMp

  Hope that helps.

  0

  ---

  

  Fetra•40

  @SupafeiPosted over 2 years ago

  @10high Hi, thanks for your response, I did your solution but it doesn't work.. but as the comment under I changed the body to flexbox and put the justify content and align items to center and it work!

  0