Tribute Page - Build a Tribute Page

Hey, I am trying to get the tribute page done but I keep running into the same issues:

  • Your img element should have a
    display of block.
  • Your #image should have a max-width of 100%.
  • Your #image should be centered within its parent.
index.html = 
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="tStyles.css">
  <title>Eiichiro Oda Tribute Page</title>
  <main id="main">
    <h1 id="title">Eiichiro Oda</h1>
    <h3>The man who changed the history of manga</h3>
    <div id="img-div" class="image-container">
      <img src="images/EiichiroOda.webp" alt="Eiichiro Oda standing holding up a his fingers making out the number 32" id="image" class="oda-image">
      <div class="caption" id="img-caption">Eiiricho Oda looking cool</div>
    <div class="life">
      <p class="life-header bold">Timeline of Eiichiro Oda's life:</p>
      <ul  id="tribute-info">
        <li><span class="bold">1975 -</span> Eiichiro Oda was born</li>
        <li><span class="bold">1982 -</span> He won second place prize in "Jun-Nyuusen" when he was 7 years old. This is the same time when eiichiro Oda decided he wanted to become a manga artist.</li>
        <li><span class="bold">1992 -</span> Won first place with the manga "Wanted!" in the Tezuka competition.</li>
        <li><span class="bold">1993 -</span> wrote the manga "Kami Kara Mirai no Purezento.</li>
        <li><span class="bold">1994 -</span> Wrote the Manga Ikki Yako.</li>
        <li><span class="bold">1996 -</span> The starting point of One Piece was through Eiichiro Oda's Manga project of Romance Dawn.</li>
        <li><span class="bold">1997 -</span> The first edition of One Piece manga was released and became very popular. </li>
        <li><span class="bold">1999 -</span> The One Piece Manga was turned into an anime.</li>
        <li><span class="bold">2004 -</span> Eiichiro Oda marries Chiaki Inaba. Who he met through the production of One Piece. Chiaki Inaba was the voice actor for the One Piece character Nami.</li>
        <li><span class="bold">2006 -</span> Eiichiro and Akira Toriyama(creator of Dragon Ball) Worked together to create a collaboration project of both of their series called "Cross Epoch"</li>
        <li><span class="bold">2009 -</span> One Piece Film: Strong Wrold was released.</li>
        <li><span class="bold">2010 -</span> With the release of "3D2Y" chapter. Eiichiro Oda declared that the seires is half way complete. </li>
        <li><span class="bold">2011 -</span> Eiichiro Oda and Mitsutoshi Shimabukuro(Creator of Toriko). Worked together on a collaboration piece called "One Piece x Toriko".</li>
        <li><span class="bold">2014 -</span> Eiichiro Oda does a tribute cover to Masashi Kishimoto(Creator of Naruto). Eiichiro and Masashi were good friends and Eiichiro wanted to congratulate Masashi on the completetion of the Naruto series. </li>
        <li><span class="bold">2015 -</span> Eiichiro broke the record for the "Most copies published for the same comic book series by a single author"</li>
        <li><span class="bold">2022 -</span> One Piece anime broke 1,000 episodes. </li>
        <li><span class="bold">2023 -</span> The realese of the Netflix live action series of One Piece.</li>
      <div class="qoute-container">
        <p class="qoute">"You can't get back what you've lost, What's important now is What is it that you still have."</p>
        <p class="qoute-author">--Eiichiro Oda</p>
  <h3>If you want to learn more about Eiichiro Oda and his accomplishments then visit <a target="_blank" id="tribute-link" href="">Wikipedia Page</a></h3>
styes.css = 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; /* Add this line for better box sizing */

body {
  background-color: lightgrey;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: black;

#main {
  /* Ensure the main element contains all other elements */
  display: flex;
  flex-direction: column;
  align-items: center;

#title {
  /* Describe the subject of the tribute page */
  padding: 20px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 24px; /* Adjust the font size as needed */
  font-weight: bold; /* Make it bold */

#img-div {
  /* Either a figure or div element */
  margin: auto;
  padding: 30px;
  background-color: #fff;
  text-align: center;

#image {
  /* Responsively resize the image */
  max-width: 100%; /* Resize relative to parent width */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Make it a block element */
  margin: 0 auto; /* Center horizontally */

#img-caption {
  /* Describe the image */
  padding-top: 5px;

#tribute-info {
  /* Describe the subject of the tribute page */
  font-size: 16px;
  padding: 10px; /* Adjust padding as needed */
  max-width: 600px;
  margin: 10px auto;

#tribute-link {
  /* Link to an outside site */
  text-decoration: none; /* Remove underline */
  color: #0073e6; /* Adjust link color as needed */
  font-weight: bold; /* Make it bold */

Your browser information:

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

without testing your code it looks like you have some errors here

make sure to use the correct value to link your style sheet to the html document


I have been going over my code for a few hours. I was getting so frustrated to the point of almost pulling out my hair. The solution was literally a small bug in my code. :sob:. Thank you for your Help!!!