Build an Event flyer page

HTML-CSS
1

Hi!
My code passes the test but my section elements do not stack next to each other when I use the inline-block value. I want my 3 section elements to be ‘inline’ like in the example.

<!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>

<body>
  <header>
    <img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg" alt="colored flags">
    <h1>Negroni Fest</h1>
    <p class="title">Join us for a weekend filled with Negroni happiness</p>
    <p><strong>When: </strong>june 15-17th <strong>Where: </strong>Antwerp city</p>
    <hr class="titlebar">
    </header>
  <main>
    <section class="workshops">
      <h2>Workshops</h2>
      <ul id="workshops">
        <li>Classic negronis</li>
        <li>New-age riffs</li>
        <li>shaken or stirred</li>
        </ul>
      </section>
    <section class="seminars">
      <h2>Seminars</h2>
      <ul id="seminars">
        <li>Molecular gastronomy</li>
        <li>A Negronis' tale</li>
        </ul>
      </section>
    <section class="online-classes">
      <h2>Online classes</h2>
      <ul id="online-classes">
        <li>Rome's best bar</li>
        <li>A chat with..</li>
        </ul>
      </section>
    </main>
    <footer>
      <hr class="footer">
      &copy; 2025 @negronisandfriends

      </footer>
</body>

</html>

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

header {
  text-align: center;
}

section {
  width: 80%;
  display: inline-block;
}

hr {
  width: 60%
}
footer {
  text-align: center;
}
2

Hi

Can you please link to the project you are doing.

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

Hi Buddy Here can you tell me at which part of code are you facing trouble with?

And you need to put the code into backticks like given below.

Here you need to tell which part of code are you facing trouble with.

Kindly do follow the advice of @a1legalfreelance.

Hope You Understand.

4

You can use Flexbox for that:

main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}

h2 {
    text-align: center;
}

Here’s a good overview from CSS-Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

UPDATE: Forgot to mention I removed the section selector.