I’m 2 weeks into coding and i did my second certification-project last week (already posted here for some feedbacks).
Now i’ve adressed the issues mentioned in the feedbacks, except one which i need your help with so i understand what i did wrong.
It seems like my image and title’s have another ‘center’ than the year and events listed below… it seems like it’s not aligned in the middle. Anyone know where i messed it up?
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tribute to Martin Luther King</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device width, initial-scale=1.0">
<meta name="description" content="freeCodeCamp coding a tribute page for Martin Luther King" />
<link rel="stylesheet" href="styles.css">
</head>
<main id="main">
<header class="header">
<h1 class="title" id="title">Martin Luther King</h1>
<h3 id="title-description" class="title-description">Learn about the life of MLK</h3>
</header>
<figure class="image-field" id="img-div">
<img id="image" alt="martin luther king on a demonstration in washington 1968" src="https://www.kindernetz.de/wissen/1653500690936%2Cmartin-luther-king-1-100~_v-16x9@2dM_-ad6791ade5eb8b5c935dd377130b903c4b5781d8.jpg">
<div id="img-caption" class="image-description">King in Washington, 28. August 1963</div>
</figure>
<div id="tribute-info" class="tribute-infos">Here you get a short timeline of the life of</div>
<div id="timeline">
<h2 id="title2">
Martin Luther King
</h2>
<ul id="timeline-list">
<li>
<p class="year">1929</p>
<p class="event">Martin Luther King Jr. is born on January 15th in Atlanta, Georgia.
</p>
</li>
<div class="divider"></div>
<li>
<p class="year">1947</p>
<p class="event">King is ordained as a Baptist minister and becomes the pastor of Dexter Avenue Baptist Church in Montgomery, Alabama.</p>
</li>
<div class="divider"></div>
<li>
<p class="year">1955</p>
<p class="event">King leads the Montgomery Bus Boycott after Rosa Parks refuses to give up her seat to a white passenger.</p>
</li>
<div class="divider"></div>
<li>
<p class="year">1963</p>
<p class="event">King delivers his famous "I Have a Dream" speech during the March on Washington for Jobs and Freedom.</p>
</li>
<div class="divider"></div>
<li>
<p class="year">1964</p>
<p class="event">King is awarded the Nobel Peace Prize for his efforts in promoting equality and nonviolent resistance against segregation.</p>
</li>
<div class="divider"></div>
<li>
<p class="year">1965</p>
<p class="event">King helps lead the Selma to Montgomery marches to advocate for voting rights for African Americans.</p>
</li>
<div class="divider"></div>
<li>
<p class="year">1966</p>
<p class="event">King launches the Chicago Freedom Movement to address issues of segregation and discrimination in the northern United States.</p>
</li>
<div class="divider"></div>
<li>
<p class="year">1967</p>
<p class="event">King delivers his speech "Beyond Vietnam: A Time to Break Silence," criticizing the U.S. involvement in the Vietnam War.</p>
</li>
<div class="divider"></div>
<li>
<p class="year">1968</p>
<p class="event">Martin Luther King Jr. is assassinated on April 4th in Memphis, Tennessee.</p>
</li>
<div class="divider"></div>
<li>
<p class="year">1986</p>
<p class="event">Martin Luther King Jr. Day is established as a federal holiday in the United States, commemorating his legacy of civil rights activism.</p>
</li>
<div class="divider"></div>
</ul>
</div>
<div class="footer">
<div id="footer-description" class="footer-description">It's safe to say, Martin Luther King was a legend of a human.</div>
<div id="outside-infos" class="footer">
Read the whole biography <a class="tribute-link" id="tribute-link" target="_blank" href="https://www.geo.de/geolino/mensch/2183-rtkl-weltveraenderer-martin-luther-king">here</a>
</div>
</div>
</main>
</html>
body {
width: 100%;
height: 100vh;
margin: 0;
font-family: Tahoma;
font-size: 16px;
text-align: center;
}
.header {
background-color: rgb(200, 200, 200);
padding-bottom: 2px;
padding-top: 1px;
margin: 0;
background-image: linear-gradient(to top, #ffffff, transparent);
}
.image-description {
font-size: 0.8rem;
text-align: center;
font-style: italic;
}
.tribute-infos {
margin-top: -5px;
}
h1 {
text-align: center;
margin-top: 50px;
margin-left: 0;
margin-right: 0;
font-weight: bold;
font-size: 40px;
font-family: arial;
}
h2 {
margin-bottom: 30px;
font-size: 25px;
}
h3 {
font-size: 18px;
font-weight: normal;
font-style: italic;
margin-top: -5px;
}
.footer {
display: block;
text-align: center;
padding-bottom: 20px;
}
.footer-description {
margin-bottom: 11px;
margin-top: 60px;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
.year {
font-weight: bold;
padding-right: 18px;
}
.event {
margin-top: -10px;
margin-right: 10px;
}
.year, .event {
margin-bottom: 30px;
margin-right: auto;
margin-left: auto;
}
#timeline-list li {
white-space: wrap;
}
a {
text-decoration: none;
color: black;
font-weight: bold;
}
ul li {
list-style: none;
}
img {
display: block;
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.image-field {
width: 100%;
margin-top: 50px;
margin-bottom: 50px;
margin-left: -1px;
}
.image-field img {
border-radius: 10px;
}
.divider {
border-bottom: 1px solid #888989;
margin-top: -10px;
margin-bottom: 19px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.divider:last-of-type {
border-bottom: none;
}
.tribute-link:hover {
background-color: grey;
color: white;
padding: 2px;
}
Let’s see where I end up, thanks anyway 