Tribute Page Certification Project- style issues

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

 }

You should have a <head> and <body> element in your HTML file, but that’s just a question of good practice, unrelated to the issue you’re experiencing.

When I view your code full-page, it’s all centre-aligned and looks good to me.

As for the fonts, I don’t know which are installed in the background on FCC but I can only get your Jura font to show if I include a Google fonts link to it in the document head. Is Roboto-r a font? Or should it just be Roboto? Either way, I think you’d need to link that in the head too.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.