I’m starting to build my portfolio website and came across this. The global selector is not resetting my h1 element.

It’s only this element and I know to only have one h1 on your entire site, so an easy fix would be to manually h1 {margin: 0}, but duplication can be avoided, no?

CSS (no styling applied to h1):

* {
  margin: 0;
  padding: 0;
}

HTML:

<main>
  <section>
    <div class="intro">
      <h1>My Portfolio</h1>
    </div>
  </section>
</main>

Margin can be seen when inspected (browser: Edge)

I’ve tried changing the h1 element in the HTML to others and they worked. I searched a few articles, and I couldn’t find any that match my issue. Copilot suggested it could be styles applied by the browser despite the * selector.