Unable to center my #image within its parent

I have tried multiple ways to center my #image within its parent including one posted in the forum.

/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=width-device, intial-scale=0">
   <title>Sir Isaac Newton</title>
   <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,500;0,600;1,300;1,500;1,600&family=Tiro+Devanagari+Marathi&display=swap" rel="stylesheet">
 </head>
 <main id="main">
   <header>
   <h1 id="title"> <i>Sir Isaac Newton</i></h1>
   <h3 id="sub">A <i>Gravitational</i> Inspiration</h3>
   </header>
<body>
 <div id="img-div">
   <img id="image" src="https://i.natgeofe.com/n/faf6f6b2-3d6f-4fee-82ed-77a2f28c0063/11606.jpg?w=636&h=437" alt="Picture of Isaac Newton and his Intrest" width="900" height="600">
   <figcaption id="img-caption">Sir Isaac Newton and his intrests such as, science and writing.</figcaption>
   </div>
<p id="tribute-info">Sir Isaac Newton PRS was an English mathematician, physicist, astronomer, alchemist, theologian, and author widely recognised as one of the greatest mathematicians and physicists of all time and among the most influential scientists. He was a key figure in the philosophical revolution known as the Enlightenment. A genius with dark secrets. Isaac Newton changed the way we understand the Universe. Although Isaac Newton is well known for his discoveries in optics (white light composition) and mathematics (calculus), it is his formulation of the three laws of motion, every object in a state of uniform motion will remain in that state of motion unless an external force acts on it.
Force equals mass times acceleration. For every action there is an equal and opposite reaction.the basic principles of modern physics for which he is most famous. He helped to shape our rational world view. <span> Click <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Isaac_Newton"> <i>here</i></a> to learn more about Isaac Newton.</span></p>
</body>




   </div>



/* file: styles.css */
header{
 background: black;
}
#image{
   display: block;
 border: 40px solid #333333;
 border-left: 100px solid #AA4A44;
 border-right: 100px solid #AA4A44;
 display: block;
 height: auto;
 max-width: 100%;
 align-item: center;
 margin:0 auto;
}
#title{
 text-align: center;
 font-family: Raleway;
 font-weight: 600;
 color: white;
}
#img-div{
 justify-content: center;
}
#sub{
 text-align: center;
 font-family: Raleway;
 font-weight: 500;
 margin-top: -10px;
 color: white;
}
body{
background: grey;
}
#img-caption{
 font-family: raleway;
 font-weight: 600;
 text-align: center;
 padding: 10px;
border-bottom-style: dotted;
}
#tribute-info{
 font-family: raleway;
 font-weight: 500;
 font-size: 20px;
 width: 90%;
 margin: auto;
 text-align: center;
 padding: 25px;
}
#tribute-link{
 color: blue;
 font-weight: 600;
}
   **Your browser information:**

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

Challenge: Build a Tribute Page

Link to the challenge:

It looks like it’s the side borders on the image that are causing the test to fail. Yes, your image is centered, but I’m guessing the way the tests are determining this is being affected by those side borders. Lose 'em and you should pass.

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