Help, this is not working

Tell us what’s happening:
Your img element should have a display of block .
Failed:Your #image should have a max-width of 100%.
Your #image should be centered within its parent.

I use CSS to set the values but the changes does not apply to my page. Why is this happening?

   **Your code so far**
/* file: index.html */
<!DOCTYPE HTML>
<html>
<main id="main">
 <h1 id="title" >Metallica</h1>
 <figure id="img-div">
   <img id="image" src="https://upload.wikimedia.org/wikipedia/commons/b/b7/Metallica_logo.png" alt="metallica logo" />
   <figcaption id="img-caption">Metallica is an American heavy metal band. The band was formed in 1981 in Los Angeles by vocalist/guitarist James Hetfield and drummer Lars Ulrich, and has been based in San Francisco for most of its career. The band's fast tempos, instrumentals and aggressive musicianship made them one of the founding "big four" bands of thrash metal, alongside Megadeth, Anthrax, and Slayer. Metallica's current lineup comprises founding members and primary songwriters Hetfield and Ulrich, longtime lead guitarist Kirk Hammett, and bassist Robert Trujillo. Guitarist Dave Mustaine (who formed Megadeth after being fired from the band) and bassists Ron McGovney, Cliff Burton, and Jason Newsted are former members of the band.</figcaption>

   </figure>
   <section id="tribute-info"><p>Metallica has released ten studio albums, four live albums, twelve video albums, a cover album, two extended plays, 37 singles and 39 music videos. The band has won nine Grammy Awards from 23 nominations, and its last six studio albums (beginning with Metallica) have consecutively debuted at number one on the Billboard 200. Metallica ranks as one of the most commercially successful bands of all time, having sold over 125 million albums worldwide as of 2018.[3] Metallica has been listed as one of the greatest artists of all time by magazines such as Rolling Stone, which ranked them at no. 61 on its 100 Greatest Artists of All Time list.[4] As of 2017, Metallica is the third best-selling music artist since Nielsen SoundScan began tracking sales in 1991,[5] selling a total of 58 million albums in the United States.</p>
     <a href="https://www.youtube.com/watch?v=WM8bTdBs-cw" id="tribute-link" target="_blank">Metallica One</a>
   </section>
  </main>


/* file: styles.css */
body {
 font-family: Arial;
}

h1 {
 text-align: center;
 font-size: 65px;
 text-transform: uppercase;
}
#image {
 width: 400px;
}

#image
{
 display:block;
 margin: 0 auto;
 max-width: 100%;
 height: auto;
 
}
   **Your browser information:**

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

Challenge: Build a Tribute Page

Link to the challenge:

I feel that I have the correct code. But the changes does not reflect on CSS. for example h1 does not go to the center and the image does not arrage the pic. please help

Hi, you can only use id once in a html page and you should only have one id with the same name in your css.

This W3 page explains more about id and how it works.

Asking for help is a very useful coding skill, but it is also important to learn how to research potential solutions and code understanding yourself. W3 is generally a good resource as is Mozilla.

hey, i would say it is because you haven't linked your html to your css page

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