Tribute Page - Build a Tribute Page

Tell us what’s happening:
Describe your issue in detail here.
I have no clue what may be wrong. ive been reading up on multiple ways to center and change width and am not sure why this is not working. The project test says I am missing:

  1. Your #image should have a max-width of `100%

2)Your #image should be centered within its parent.

Someone please hook it up with a hint.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>

<html lang="en">
   <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
      <title id="title">A tribute to Nicola Tesla</title>
  </head>
  <body>
    
    <main id="main">
     
    <h2><span style="font-family:monospace">The most under-rated Genius</span></h2><br>
    <center>
  <div id="img-div"><img src="https://thefifthestate.com.au/wp-content/uploads/2020/09/Nikola-Tesla-Publicity-photo-laboratory-Colorado-Springs-December-1899-1-e1669264265908.jpg" id="image" style="display:block" >
 
    
   <figcaption id="img-caption">Nikola Tesla sitting in his Colorado Springs laboratory next to his huge "magnifying transmitter" Tesla coil which is producing 22 foot bolts of electricitys.</figcaption>
     </div>
     

    <h3>A Tribute To Nicola Tesla: The father of Modern Electricity</h3>

  <label>Some notable facts about Tesla</label>
      
      <ul id="tribute-info"	style=“list-style-type:disc”>
<li>Nikola Tesla was born to Serbian parents in Smiljan, in what was then the Austrian Empire (now in Croatia)</li>

<li>Nikola Tesla studied engineering at the Technical University at Graz, Austria, and the University of Prague </i>

<li>Tesla contributed knowledge and inventiveness to AC electric current, wireless communications and X-ray technology. He also had unrealized plans for inventions like the thought camera, the earthquake machine and the death ray.</li>


<li>Tesla contributed knowledge and inventiveness to AC electric current, wireless communications and X-ray technology. He also had unrealized plans for inventions like the thought camera, the earthquake machine and the death ray.</li>


<li> Tesla was good friends with Mark Twain. The famous writer was enamoured with Tesla’s peculiarities and loved to play with the various inventions in Tesla’s labs.</li>


<li>Tesla was a visionary of future technological progress. He predicted smartphones, Wi-Fi, self-driving cars and the possible rise of artificial intelligence.</li>

<li>  Tesla died of heart failure, a forgotten man, on January 7, 1943, the Orthodox Christmas Day of that year. Agents from the Federal Bureau of Investigation immediately removed the papers from Tesla's safe, citing wartime security concerns. His funeral was conducted in New York, and his body was cremated.</li>



    </ul>
    </div>
 
 

<footer>If you would like to know more about Telsa and would like to see a documentary please click on the link <a id="tribute-link" target="_blank" href="https://topdocumentaryfilms.com/tesla-master-of-lightning/"><b>"Tesla:Master of Lightening"</a></footer>
</main>

  </body>
 






    </main>

</html>

/* file: styles.css */
h2 {text-align: center;
  text-transform: uppercase;
  background-color:;
  color: black;
  border-bottom: 4px solid blue;border-top: 4px solid blue;border-left:auto;border-width:1px;width:800px; margin-left:auto; margin-right:auto; }
}

main> div > img{width:50%;max-width:100%
 display:block;
  margin-left: auto;
  margin-right: auto;
}

figcaption{font-size:20px}

label{font-weight:bold;color:blue;font-size:18px;text-decoration: underline;text-align:center; }

li {font-family:courier new;font-weight:bold;margin-bottom:2px;padding-bottom:15px;width:50%;}



footer{font-size:15px;color:red;text-align:center;background-color:yellow;box-sizing: border-box;
width:400px;

*main{align-text:center;}

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:

BTW i added a ; to —> max-width:100%;

and still not going through. Am i using css wrong? not sure how to center based on the parent. ill go double check on the previous projects.

You have errors in the CSS you posted. Try validating it.

https://jigsaw.w3.org/css-validator/#validate_by_input

This selector main > div > img is not targeting the image. You have another element that isn’t accounted for by that selector. An element you really shouldn’t be using by the way.

Thank you thank you! Ill make sure not to use it anymore and thank you for your help!

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