Hello,
When I view my Tribute Page Certification Project through my profile, the font style changes and my text is out of alignment with my image.
Any suggestions please? Many thanks.
HTML
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title id="title">Nick Cave</title>
<main id="main" />
<div class="container">
<h1>Nick Cave</h1>
<h2>"To act on a bad idea is better than to not act at all."</h2>
<div id="img-div">
<a id="tribute-link" class="img-link" href="https://www.clashmusic.com/features/nick-cave-the-bad-seeds-push-the-sky-away-at-10/" target="_blank">
<img id="image" src="https://i.scdn.co/image/ab6761610000e5ebb3d85d2a5291498bac66ae26" class:"block-img"></a>
<figcaption id="img-caption">Cave's music is characterised by emotional intensity, a wide variety of influences and lyrical obsessions with death, religion, love and violence.</figcaption>
</div>
<div id="tribute-info">
<p id="tribute-info">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. </p>
</div>
</div>
</div>
</main>
CSS
#image {max-width: 100%;
height: auto;
display: block;
text-align: center;
}
img {
display: block;
margin: 0 auto;
}
.container {margin: 0 auto;
max-width: 920px;
padding: 0 15px;
}
main {font-family: Roboto-r;
font-size: 20px;
background: grey;
width: 100%;
}
body {background: grey;
}
h1 {padding: 30px 0 0 0;
margin: 25px 0 0 0;
font-size: 2.8em;
}
h2 {
font-style: italic;
font-size: 20px;
padding: 0;
margin: 0;
}
h1, h2 {font-family: Jura, Roboto-r, sans-serif;
text-align: center;
max-width: 920px;
}
#img-caption {text-align: justify;
margin: 10px 139px 10px 139px;
font-size: 15px;
}
#tribute-info {text-align: justify;
margin: 30px 70px 10px 70px;;
}