Build an Event Flyer Page - Build an Event Flyer Page

HTML-CSS
1

Tell us what’s happening:

I used an HTML & CSS validator and both came out correct, but I am still failing tests related to the body element.

  • Failed:10. Your body element should have a top and bottom padding of 50px.

  • Failed:11. Your body element should have a top and bottom margin of 0.

  • Failed:12. Your body element should have a left and right margin of auto.

  • Failed:13. Your body element should set its width using vw.

  • Failed:14. Your body should use calc to set its min-height to 100vh - 100px.

  • 16. The width of your hr elements should be set using a percent value.

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" alt="colourful tags" />
  <h1>An Event</h1>
</header>
<main>
  <section>
    <h2>Description</h2>
  </section>
  <hr>
  <section>
    <h2>Description 2</h2>
  </section>
</main>
</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)
}

.hr, section {
  width: 20%;
}

Your browser information:

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

Challenge Information:

Build an Event Flyer Page - Build an Event Flyer Page

2

Try using margin and padding shorthand. Here’s a link for the margin shorthand. They both work the same.

margin - CSS | MDN

3

It didn’t solve anything :frowning:

4

Please share your updated code

5 
<!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" alt="colourful tags" />
  <h1>An Event</h1>
</header>
<main>
  <section>
    <h2>Description</h2>
  </section>
  <hr>
  <section>
    <h2>Description 2</h2>
  </section>
</main>
</body>

</html>

.body {
  padding: 50px 0px;
  margin: 0px auto;
  width: 100vw;
  min-height: calc(100vh - 100px)
}

.hr, section {
  width: 20%;
}
6

it says this, you are using what selector?

7

you, my dearest mentor, just made me feel really stupid :sob:

what about:

Failed:16. The width of your hr elements should be set using a percent value.

8

Is hr an element or a class?

9

im quite the examplary idiot

10

Please don’t be so hard on yourself. You are learning. And every mistake is an opportunity to learn something.

11

You learn more from mistakes than doing something perfectly the first time. We’re all here together learning a lot from our mistakes.