Tribute Page - Build a Tribute Page

Tell us what’s happening:
Describe your issue in detail here.
- For the last step requirement I am having trouble. It says "Your #image should be centered within its parent. " but I have used align-items and text-align properties like google says but still no dice. Is there a problem with my CSS or is it my html code? please help!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Anthony Gilam Milam Jr.</title>
    <link href="./styles.css" rel="stylesheet"/>
  </head>
  <body>
    <header>
      <h1>Anthony Gilam Milam Jr.</h1>
      <p>tribute page </p>
    </header>
    <main id="main">
      <div id="img-div">
        <img id="image" name="image" src="https://i.ytimg.com/vi/XQ3UWUxoB9A/maxresdefault.jpg">
        <div id="img-caption">
        <p><em>Christian Berner on the cover of Forbes Magazine</em></p>
        </div>
      </div>
      <section id="tribute-info">
        <h3>The Latino-American who created a cannabis Empire </h3>
<ul>
  <li> Born in 1981, in San Francisco County as Gilam Milam Jr., better known as Berner</li>
  <li>Began his rap career battle-rapping and released his first mixtape in 2006 at the age of 25</li>
   <li>Berner worked as a bartender, then a budtender, and ran an unregulated cannabis club in the Bay area</li>
  <li>He became well-known among cannabis enthusiasts and celebrities for his high-quality weed. In fact, it was cannabis that connected Berner to Wiz Khalifa.</li>
 <li> When Berner first launched the Cookies brand, he was just selling merchandise</li>
 <li>Today, the Cookies brand has licensed cannabis retail stores operating in multiple states, including California, Oregon, Montana, Oklahoma, Nevada, Colorado, Michigan, Maryland, Massachusetts,Florida, and Arizona</li>
 <li>The Cookies name comes from the a the popular cannabis strain "girl scout cookies" which was shortened to cookies for obvious copyright reasons</li>
</ul>
      </section>
<div>
  </div>
  <div class="footer">
 <p class="footer">For more information on Berner's life and achievements visit his <a id="tribute-link" target="_blank"  href="https://en.wikipedia.org/wiki/Berner_(rapper)">wikipedia</a> page...<p>
   </div> 
    </main>
    </body> 
</html>
/* file: styles.css */
#img-div img{
  max-width: 100%;
  min-width:300px;
  display: block;
  height: auto;
  margin:0  auto;
  align-items:center;
}
#img-div{
  padding:25 10 0 10;
  margin:0 auto;
  display:flex;
  width:800px;
}
body{
font-family:serif;
background-color:#7FB3D5;
color:white;

}
header{
  text-align:center;
  width:100%;
  min-width:100px;
  height:100px;
  display:block; 
}
section{

}
h3{
  text-align:center;
  font-size:28
}
.footer{
  text-align:center;
  background-color:#2196F3;
  width:max;
   box-shadow: 8px 10px 10px 1px rgba(0,0,0,0.5);
   border-radius:5px;
   height:30px;
   padding-bottom:0;
   margin:0 0 20 0
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

Change the display property’s value to “block” in the #img-div selector.

1 Like

I agree. I think the img-div shouldn’t be flex

1 Like

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