React accordion component

Community feedback

• 

  Jenny Eikens•40

  @Jenny-EikensPosted 17 days ago

  Hi Nikita,

  great job on the challenge! :)

  Regarding your issue with centering the component, I would suggest the following:

  In your index.css file, remove the margin-top from your main element. Also remove the margin-bottom from your faq element. Give the body a height of 100vh rather than 100% to make sure it spans the entire height of the viewport. You already have the display of your body set to flex, and you've centered the component horizontally by applying justify-content: center. All that's missing is adding align-items: center, so your content will be properly aligned along the cross axis as well (in your case, vertically). The final code should look something like this:

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /* Ensures the body takes the full viewport height */
      margin: 0;     /* Removes any default margin */
    }
  

  This turns your body into a flex container and aligns all content within it in the center.

  Hope this helps :)

  0