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;
}