Build an Event Flyer Page - Build an Event Flyer Page

HTML-CSS
1

Tell us what’s happening:

Steps 7, 8 and 9 happen to fail, even though my HTML code seems to be ok. I do not see what goes wrong. Please help.
QUOTE
Failed: 7. You should have at least two section elements within your main element.
Failed: 8. Your section elements should each have an h2 within them.
Failed:9. Your h2 elements should not be empty.
UNQUOTE

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Build an Event Flyer Page</title>
</head>

<body>

  <header>
    <img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg" alt="multicolor triangular flags">
    <h1>Minority Festival</h1>
<p class="heading">Join us for the first-ever<br>annual Minority Festival</p>
<p class="date-and-place"><span>When</span>: November 25, 2025</p>
<p class="date-and-place"><span>Where</span>: Trafalgar Square, London, UK</p>
<br>
  </header>
 <hr>

<main>
 <div class="flex-container">
  <section>
    <h2>Celibates' party</h2>
      <ul>
         <li><em>Ice-breaker at 9am:</em><br>Everyone in turn will climb on the stage to shout their first name with pride</li>
         <li><em>Dancing session from 10am to 1pm:</em><br>The crowd will pogo joyfully, celebrating this unique happiness of being the master of oneself</li>
         <li><em>Valedictorian speech from 1pm to 2pm:</em><br> A well-known, prominent activist will express their views</li>
      </ul>
   </section>
      <section>
          <h2>Child-frees' party</h2>
      <ul>
         <li><em>Ice-breaker at 2pm:</em><br>Everyone in turn will climb on the stage to shout their first name with pride</li>
         <li><em>Dancing session from 3pm to 6pm:</em><br>The crowd will pogo joyfully, celebrating this unique happiness of being the master of oneself</li>
          <li><em>Valedictorian speech from 7pm to 8pm:</em><br> A well-known, prominent activist will express their views</li>
      </ul>
    </section>
       </div>
      <hr>
   <p class="onsite-organisation"><em>Participants may come to both half-days parties or just one.</em><br>A foodtruck will distribute water and fruits liberally.<br>A first-aid team will be deployed to cover the event.</p>
   <hr>
  </main>
  
     <footer>&reg; Minority Festival</footer>

</body>

</html>

/* file: styles.css */
body {
  padding-top: 50px;
  padding-bottom: 50px;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
  min-height: calc(100vh - 100px);
  font-family: Verdana;
  }

  hr, section {
    width: 200%;
  }

  header {
    margin: auto;
    width: 400px;
    text-align: center;
   }

   .heading {
     font-size: 1,9em;
     font-weight: bold;
     padding-top: 10px;
   }

   .date-and-place {
    font-size: 1,4em;
    padding-top: 10px;
   }

   .flex-container {
  display: flex;
}

  .footer {
    text-align: center;
  }

  span {
    color: green;
    text-decoration: underline;
  }

  em {
    color: green;
  }

footer {
  color: green;
  font-weight: bold;
  text-align: center;
}

li {
  font-size: 0,8em;
}

   .onsite-organisation {
    font-size: 12px;
    padding: 10px;
    text-align: center;
    font-style: italic;
   }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build an Event Flyer Page - Build an Event Flyer Page

2

The tests may be checking whether the two <section> elements are direct children of <main>. You have a <div> around the section elements that, although it makes your page look pretty, might be messing with the tests.

3

You can move the flex class to main and then move the hr and p elements below main. Should be about the same without needing the extra div.