Build an Event Flyer Page - Build an Event Flyer Page

HTML-CSS
1

Tell us what’s happening:

help with the errors .I have tried a lot concern this issue.

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>
</head>
<link rel="stylessheet" href="styles.css">
<body>
 <header>
    <img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg">
    <h1>Pet Rock Festival</h1>
    <p>Join us for the first annual Pet Rock Festival!</p>
    <p><b>When:</b> October 3rd <b>Where:</b> Boulder Park</p>
  </header>
  <hr>
  <main>

    <section class="hl">
      <h2>Festival Highlights</h2>
        <ul>
          <li>Pet Rock Obedience Shows</li>
          <li>Best Dressed Pet Rock</li>
          <li>Pet Rock Uphill Racing</li>
        </ul>
    </section>

    <section>
      <h2 class="sg">Special Guests</h2>
        <ul>
          <li>John Gravel</li>
          <li>Wendy Cobblestone</li>
        </ul>
    </section>
    
    <section class="ft">
      <h2>Food Trucks</h2>
        <ul>
          <li>Rock 'n' Roll Tacos</li>
          <li>Granite Grill</li>
          <li>Stone Cold Smoothies</li>
        </ul>
    </section>

  </main>

  <hr>

  <footer>
    <p>© 2025 Pet Rock Festival</p>

  </footer>
</body>

</html>

/* file: styles.css */
header {
  text-align: center;
}

body {
  font-family: Arial;
  padding-top: 50px;
  padding-bottom: 50px;
margin-top: 0px;
  margin-bottom: 0px;




  width: 100vw;
  margin: auto;
  min-height: calc(100vh - 100px);
}

hr {
  width: 90%;
}

main{
  text-align: center;
}

section {
  display: inline-block;
  text-align: center;
  width: 20%;
}

footer {
  text-align: center;
}

Your browser information:

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

Challenge Information:

Build an Event Flyer Page - Build an Event Flyer Page

2

Please refer to this resource for top/bottom, left/right margin shorthand syntax:

margin - CSS | MDN