Learn basic CSS by building a cafe menu - step 24

Why the Text is not centered inside the “main” element?

Make sure your CSS is set up like so:

main {
  text-align: center;
}

Just for some more reading about CSS:

Make sure your styles are set up like this if you’re targeting a main element. I don’t know if this is in regards to a challenge, but CSS also cares about specificity and where styles are literally read in the browser.

For example, let’s say you have this:

main {
  text-align: center;
}

h1 {
  color: blue;
}

main {
  text-align: left;
}

Because of the cascading nature of CSS, the text will be aligned left instead of center, because it is the last selector in the styles.

CSS gets even more complicated because specificity and where the styles are applied (external file, on the page, or embedded in a style attribute on the element itself) make a difference as to what style is kept and what style is discarded.

Thanks but my topic concerns a chalenge. Take a look

<div>
  <main>
    <h1>CAMPER CAFE</h1>
    <p>Est. 2020</p>
    <section>
      <h2>Coffee</h2>
    </section>
  </main>
</div>
h1, h2, p {
  text-align: center;
}
h1, h2 and p are centered inside the div element. why not the main element?

You should link to the challenge itself.

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-24

Here it is

Ah, I see your actual question now. The div element and the main element have the same block display property by default, which means their width is 100% of the element they’re being rendered inside of. Because the div element is relative to the body (and the body has no width set on it), the main element takes up the same amount of space as the div. So, when you set a width on the div element, it affects every single display: block; default elements inside of it which include: main, h1, h2, and p elements.

At this point, the main element is actually not doing anything. It is a useless element at this point.

You can even test this by removing the main element like so (and watch the display because nothing happens):

<div>
        <h1>CAMPER CAFE</h1>
        <p>Est. 2020</p>
        <section>
          <h2>Coffee</h2>
        </section>
    </div>

It is clear. Thanks!

1 Like

Not a problem! Happy Coding!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.