I’m nearly finished with the Tribute Page certification challenge. The problem is that
- bulleted items have one set of bullet characters that are all the way to the left, and the others , that are right next to the dates, are fine but I need them all lined up underneath each other nice and neat. I’m kind of lost. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brandon Lee's short but amazing career</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">Brandon Lee</h1>
<p>A mighty talent taken too soon.</p>
<figure id="img-div">
<img id="image" src="...image" alt="Brandon Lee At The Beginning of His Career">
<figcaption id="img-caption">
A photo from the early 1990s of Brandon Lee, an actor on the precipice of a major career explosion before he was so tragically taken from this world.
</figcaption>
</figure>
<section id="tribute-info">
<h3 id="headline">A timeline of his life.</h3>
<ul id="timeline">
<li>●<strong>1965</strong> - Born in Oakland, California.</li>
<li>●<strong>1974</strong> - Begins training with Dan Inosanto.</li>
<li>●<strong>1985</strong> - Lee moves to L.A. and receives his first role in Kung Fu: The Movie</li>
<li>●<strong>1991</strong> - Lee rejects an offer to play his father in Dragon: The Bruce Lee Story.</li>
<li>●<strong>1992</strong> - Rapid Fire establishes Brandon Lee as the new action star.</li>
<li>●<strong>1992</strong> - Lee lands the iconic role of Eric Draven in The Crow.</li>
<li>●<strong>1993</strong> - A freak accident on the set of The Crow takes the life of Brandon Lee.</li>
<li>●<strong>1994</strong> - The Crow is released and becomes an instant cult classic. Lee would have potentially signed for multiple sequels.</li>
</ul>
<blockquote>
<p>"Because we do not know when we will die, we get to think of life as an inexhaustible well. And yet everything happens only a certain number of times. And a very small number really."</p>
<cite>-- Brandon Lee</cite>
</blockquote>
<h3>To read more about his life check his <a id="tribute-link" href="wikilink" target="_blank">Wikipedia entry</a>.</h3>
</section>
</main>
</body>
</html>
and the CSS…
/* Basic Styles */
body {
font-family: Arial, sans-serif; /* Choose a suitable font family */
margin: 0; /* Remove default margin from body */
padding: 0; /* Remove default padding from body */
display: flex; /* Make the body a flex container */
justify-content: center; /* Center elements horizontally within the body */
min-height: 100vh; /* Set minimum height for viewport */
align-items: flex-start; /* Vertically align content at the top */
background-color: #f5f5f5; /* Light background color */
}
/* Content Styles */
#main {
text-align: center; /* Center content within the main element */
background-color: #fff; /* Optional background color for the content area (white) */
padding: 2em; /* Add some padding for content */
border-radius: 5px; /* Optional rounded corners for the content area */
}
h1, h2, h3 {
margin-bottom: 1em; /* Add space after headings */
}
/* Image Styles */
#img-div {
margin: 0 auto; /* Center image horizontally */
}
#timeline {
text-align: center;
margin: 0 auto;
}