Help me build my tribute page

HTML-CSS
#1

Tell us what’s happening:
I’ve been havin trouble figuring out what I am missing. The problem I am sitting with is:

  • User Story #9: The img element should be centered within its parent element.

Your code so far

HTML
--------------------------------------------------------
<main id= "main">

<div id="box1">
  
  <h1 id= "title"> Sir Isaac Newton </h1>
  <p id= "tribute-info">
  Sir Isaac Newton (25 December 1642 – 20 March 1726/27) was an English mathematician, physicist, astronomer, theologian, and author (described in his own day as a "natural philosopher") who is widely recognised as one of the most influential scientists of all time, and a key figure in the scientific revolution. His book Philosophiæ Naturalis Principia Mathematica ("Mathematical Principles of Natural Philosophy"), first published in 1687, laid the foundations of classical mechanics. Newton also made seminal contributions to optics, and shares credit with Gottfried Wilhelm Leibniz for developing the infinitesimal calculus.
  </p>
  
  
  <div id="img-div"><img id="image">
  <p id="img-caption"> Sir Isaac Newton, best mathematician that ever lived </i></p> </div>
  
<footer id="footer">
  <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Isaac_Newton">For more information about Isaac Newton<br>Click Here</a><br>
  </footer>
</div>

  
</main>

----------------------------------------------------------
CSS:
body {
  background-color: white;
}


#main {
  font-family: "Times New Roman", Times, serif;
}

#title {
  font-size: 35px;
}

#box1 {
  display: block;
  max-width: 400px;
  height: 900px;
  border: 5px solid grey;
  padding: 75px;
  margin: auto;
  margin-top: 300px;
  text-align: center;
  font-size: 17px;
}

#img-div {
  display: block;
  text-align: center;
  background: grey;
  padding: 4px;
  content: url(https://www.biography.com/.image/t_share/MTM1NTU3NzMzOTA1NjQ3NjI2/sir-isaac-newton-wikimedia_commonsjpg.jpg);
  margin: auto;
  margin-top: 20px;
  max-width: 80%;
}
 
img{
  height: auto;
  margin: auto;
    display: block;
  max-width: 50%;
  }



#img-caption {
  color: black;
  align-self: top;
  font-size: 10vmin;
}

#tribute-info {
  display: block;
  max-width: 100%;
  margin: auto;
  font-size: 2.2vmin;
}

#tribute-link {
  color: #9ec3f5;
}
  
.bigger_text{
  font-size: 2.5vmin;
}
.smaller_margins {
  margin-bottom: 15px;
}

Your browser information:

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

Link to the challenge:

#2

Add the image as a normal img element inside the #img-div container and not using the content property on #img-div.

#3
  1. The <img> element should be centered within its parent element.

The parent element is #img-div and the <img> element is nested within it so you just need to center the <img> element.

In your CSS you’ve applied the styling to center it to the id of img-div which applies to the <div> element instead of the <img> element. You could move
content: url(https://www.biography.com/.image/t_share/MTM1NTU3NzMzOTA1NjQ3NjI2/sir-isaac-newton-wikimedia_commonsjpg.jpg);
and
text-align: center; to img in your CSS so it applies to the <img> element as required.

#4

Thank you akawais. You were of great help! :slight_smile: