Build an Event Flyer Page - Build an Event Flyer Page

HTML-CSS
1

Tell us what’s happening:

I keep getting nagged by the following for this lab:
7. You should have at least two section elements within your main element.
8. Your section elements should each have an h2 within them.

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>
<header>
  <img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg" alt="Triangular coloured flags hanging across a gathering area.">
    <h1>Flag Waving Festival-arama</h1>
    <p>Join us for good ol' arm waving frivolity of the likes you've never seen.</p>
    <p><b>When:</b> Right now! <b>Where:</b> The Central Plaza</p>
</header>
<body>
  <main>
    <hr>
    <div class="row">
      <section>
        <div class="column">
          <h2>Festival Highlights</h2>
            <ul>
              <li>Tieing flags with invincible knots</li>
              <li>Re-colouring extravaganzas</li>
              <li>Flag prognosis</li>
            </ul>
        </div>
      </section>

      <section>  
        <div class="column">
          <h2>Special Guests</h2>
            <ul>
              <li>201st flag waving champion of Iceland</li>
              <li>Flaggy rock stars of Anubis</li>
            </ul>
        </div>
      </section>

      <section>  
        <div class="column">
          <h2>Food Trucks</h2>
            <ul>
              <li>Vegarama corn grits</li>
              <li>Tofu combo Burgers</li>
              <li>Meat/no-meat Thai red curry</li>
            </ul>
        </div>
      </section> 
    </div> 
  <hr>
  </main>
</body>
<footer>
  <p>© 2025 Flag Waving Festival-arama</p>
</footer>



</html>

/* file: styles.css */
body {
padding:50px 0px;
margin:0;
margin-left:auto;
margin-right:auto;
min-height:calc(100% - 100px);
width:100%;
}

hr, section {
width:80%;
}

header, h2, p {
text-align: center;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Your browser information:

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

Challenge Information:

Build an Event Flyer Page - Build an Event Flyer Page

2

Hi @rob88blu ,

If you make sure your body tags are placed correctly and remove the extra divs you added, your code should pass the tests.

Happy coding!

3

Hi,

I have moved the tags around to various positions but it doesn’t seem to make any difference, including main and div.

Advising someone to place tags correctly without explaining what ‘correctly’ is would seem unhelpful direction.