Tribute Page CSS Not Updating Preview But Codepen Does

The “header-title” & “header-content” div I applied to the heading and paragraph element is not moving the content to the center using the justify-content property.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tribute-page.freecodecamp.rocks</title>
</head>
<body>
    <main id="main">
      <div class="header-content">
      <h1 id="title">Dr. Norman Borlaug 
</h1>
</div>
<div class="header-content">
<p>The man who saved a billion lives
</p>
</div>
      <div id="img-div"><img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"></div>
    </main>
</body>
</html>

CSS:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header-title {
  display: flex;
  justify-content: center;
}

.header-content {
  display: flex;
  justify-content: center;
}

#img-div {
  display: flex;
  justify-content: center;
}

Hi,
the style doesnt work because you haven’t linked to to your styles.css file.
make sure to add the link to the css file in your head element and it should work.

I do not see any class attribute in the html with a value of header-title.

@JuniorQ Wow that was such a stupid mistake. Thank you for your help.

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