Hi everyone,
I am having an issue with my code i don’t quite understand.
It seems that i cannot pass the final test " Your #image should be centered within its parent."
It seems to be related to the border of my #image css selector; when i submit my code with the border it will fail, but if i submit my code without the border it passes.
Please help me understand what i’m doing wrong!
Thanks!
**Your code so far**
/* file: index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="main">
<h1 id="title">Franz Schubert</h1>
<p id="title-description">Early 19<sup>th</sup> century Austrian musician and composer</p>
<figure id="img-div">
<img id="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/Franz_Schubert_by_Wilhelm_August_Rieder_1875_cropped.jpg/600px-Franz_Schubert_by_Wilhelm_August_Rieder_1875_cropped.jpg?20210911173134" alt="A portrait of Franz Schubert">
<figcaption id="img-caption">
<i>An oil painting of Franz Schubert created by Austrian painter William August Rieder.</i>
</figcaption>
</figure>
<section id="tribute-info">
<h3>Some facts about Schubert</h3>
<ul>
<li>
Schubert was a composer of the late Classical and early Romantic eras.
</li>
<li>
Born January 31<sup>st</sup>, 1797 and died November 19<sup>th</sup>, 1828.
</li>
<li>
He is considered one of the pivotal composers who moved music out of the Classical era and into the Romantic era.
</li>
<li>
Despite his short life, Schubert wrote over 1,500 compositions, including 600 vocal works, 7 full symphonies, various operas, sacred works, and a large amount of chamber music.
</li>
<li>
Some of his most famous works include "Erlkönig" (D.328), Piano Quintet in A Major (nicknamed <i>The Trout</i>), and the never-completed Symphony No. 8 in B Minor, thusly named the <i>Unfinished Symphony</i>.
</li>
<li>
Schubert was one of many famous composers who studied with renowned Italian composer, Antonio Salieri.
</li>
<li>
Schubert is most well-known for his large amount of songs for voice and piano, called 'lieder'.
</li>
<li>
Schubert's lieder would often contain the text of other famous German and Austrian poets, including Johann Wolfgang von Goethe, Wilhelm Müller, Johann Gabriel Seidl, and Ludwig Rellstab.
</li>
<li>
His style combines harmony and texture to depict the actions of the text his music is based on, such as the spinning wheel in "Gretchen am Spinnrade" and the relentless galloping horse in "Erlkönig".
</li>
</ul>
<h3>More information about Franz Schubert can be found <a id="tribute-link" href= "https://en.wikipedia.org/wiki/Franz_Schubert" target="_blank">here</a>.</h3>
</section>
</main>
</body>
</html>
/* file: styles.css */
body {
font-family: Verdana;
background-color: #D6D2CC;
margin: 0;
align-items: center;
}
h1 {
font-size: 4.5rem;
margin-bottom: -10px;
}
p {
font-size: 1.2rem;
padding-bottom: 55px;
}
h1, p {
text-align: center;
}
#image {
max-width: 100%;
height: auto;
align-items: center;
display: block;
margin: auto;
border-radius: 500px;
border: 10px solid #A55C29;
}
.img-div {
text-align: center;
align-items: center;
}
figcaption {
text-align: center;
padding-bottom: 80px;
padding-top: 20px;
font-size: 14px;
}
h3 {
margin: auto;
text-align: center;
}
ul {
font-size: 1.2rem;
max-width: 700px;
margin: -50px auto 50px auto;
text-align: left;
line-height: 1.7;
background-color: #F3EFDF;
border-radius: 5px;
}
li {
padding: 10px;
}
h3 {
padding-bottom: 70px;
}
a:link {
text-decoration: none;
}
h4 {
text-align: center;
font-size: 10px;
}
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36
Challenge: Tribute Page - Build a Tribute Page
Link to the challenge: