Build an Event Flyer Page - Build an Event Flyer Page

HTML-CSS
1

Tell us what’s happening:

Everything except “11. Your body element should have a top and bottom margin of 0.” was accepted.

I would also like all h2 titles to be aligned, because the middle one is slightly lower than the the other

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>
  <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/134.0.0.0 Safari/537.36

Challenge Information:

Build an Event Flyer Page - Build an Event Flyer Page

2

Hi there, your HTML is correct, but the issue is in your CSS. Your body selector has conflicting margin properties: one sets it to auto, while another sets specific values for top and bottom. The lesson expects left and right margins to be auto while keeping top and bottom margins at 0px, so adjust your code accordingly.

3

Thanks that did the trick!

1 Like