Build an Event Flyer Page - Build an Event Flyer Page

Tell us what’s happening:

hello i hope you are fine and happy new year to you ,please i can’t pass this step

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">
  <title>Build an Event Flyer Page</title>
<link rel="stylesheet" href="styles.css" />
</head>

<body class="body">
<header>
  
  <img
  src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg"
  alt="an image of a rock">
  <h1 class="header">Pet Rock Festival</h1>
  <p>Join us for the first annual Pet Rock Festival!</p>
<p><strong>When</strong>:October 3rd <strong>Where</strong>:Boulder Park</p>
</header>
<hr>
  <div class="contenair">
    <main>
    <section class="section1">
      <h2>Festival Highlights</h2>
      <ul>
        <li>Pet Rock Obedience Shows</li>
        <li>Best Dressed Pet Rock Contest</li>
        <li>Pet Rock Uphill Racing</li>
      </ul>
    </section>

     <section class="section2">
       <h2>Special Guests</h2>
      <ul>
        <li>John Gravel</li>
        <li>Wendy Cobblestone</li>
      </ul>
    </section>

    <section class="section3">
    <h2>Food Trucks</h2>
    <ul>
      <li>Rock 'n' Roll Tacos</li>
      <li>Granite Grill</li>
      <li>Stone Cold Smoothies</li>
    </ul>
    </section>
   </main>
  </div>
  <hr>
  <footer>
  <p>© 2025 Pet Rock Festival</p>
  </footer>
</body>

</html>
/* file: styles.css */
body {
padding:50px;
margin:0 auto;
width:50vw;
font-family: Arial sans-serif;
min-height:calc(100vh - 100px)
}
hr {
width: 85%; 
margin: 80px auto;
}
.section1, .section2,.section3{
  width: 33%;
}
main {
  display: flex;
  gap: 20px; 
  width: 100%;
  margin: 0 auto;
}

Your browser information:

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

Challenge Information:

Build an Event Flyer Page - Build an Event Flyer Page

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.

here we have main element in the body,line 6 and 17 implement this,yes the result of the code match with the requirement and the output,

is that directly inside the body tho?

yes you can see on the picture

I can see that your main is inside a div, that is not directly inside body

when i do it it destroy the first instruction

you don’t need to put the header inside main, it’s the same issue, they need to be both inside body, be direct children of body

thanks finally i pass it the test

Hi all please hel coders . Firstly I don’t know where to post my question :red_question_mark:It’s my first time posting , pardon me if I posted in the wrong place or on someone’s post.

Iam having a challenge on passing my code on the main , I believe I have done all correct , when I opened the main tag and close it and nested two sections with two h2 and some text in it but somehow it keeps getting it incorrect on the main . Below view my coding screens and assist

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.