Need help with "your #image should be centered within its parent."

Hello, I’m doing my first project, it’s very simple but the last requirement can’t be done. I’ve used the margin option to center my image, but even while it looks centered, it is still marking it with an X. Does anyone have any idea of what is happening? I can share the code if needed.

HI @giancarlog89 !

Welcome to the forum!

Did you link your css to the html document so the test can pick up on the changes?

If so, then can you share your code of what you have tried?

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hello, thank you for your help!

I wasn’t sure how to start writing code for the project and also don’t know how to link to the styles.css tab so I just wrote in the single tab of index.html.

I’ve tried adding auto margins to several items but I left it with the “#image” id in styles

My code is this:

<!DOCTYPE html>
<html>
<main id="main">
  <head>
  <title id="title"> A brief timeline of Genghis Khan
     </title>
     <link href="https://fonts.googleapis.com/css2?family=Quattrocento+Sans&display=swap" rel="stylesheet" type="text/css"> 
     <style>
      body {
        background-color: #E0C9AF;
      }

      h1, h4 {
        text-align: center;
        font-family: Quattrocento Sans;
      }

         .container {
    font-size: 40px;
    width: 100%;
    height: auto;
    background: White;
    padding-top: 20px;
    padding-bottom: 1px;
      }
      #img-div {
        width: 100%;
        margin: 0 auto;
      }

      #image {
        width: 400px;
        max-width: 100%;
        height: auto;
        display: block;
        margin: 5vw auto 0 auto; 
        border-color: black;
        border-width: 10px;
        border-style: solid;
        border-radius: 10px;       
      }

    p {
      font-size: 18px;
      font-family: Quattrocento Sans;
      text-align: center;
    }

    ul {
      list-style-position: inside;
      font-family: Quattrocento Sans;
    }
    li {
      padding-bottom: 20px;
      margin-left: 30%;
    }
    
    </style>
  </head>
  <body>
    <h1> Genghis Khan </h1>
    <h4> The Scourge of God </h4>
    
    <div class="container">
  <figure id="img-div"> <img src="https://www.xlsemanal.com/wp-content/uploads/sites/3/2017/06/genghis-khan-808x1024.jpg" alt="Genghis Khan portrait dating of XIV Century" id="image" class="black-border">
  <div id="img-caption"> <p> Genghis Khan created the largest land empire in human history. <p> </div></figure>
</div>
<div id="tribute-info">
<p><strong>Here's a brief timeline of Genghis Khan's life:</strong>
</p>
  <ul> 
    <li> <strong>1162</strong>: Temujin is born in Deluun Boldog. </li>
    <li> <strong>1171</strong>: Temujin and his mother are abandoned by his father's tribe. </li> 
    <li> <strong>1172</strong>: Temujin kills his half-brother.</li>
    <li> <strong>1177</strong>: Temujin escapes from the Tayichi'ud. </li>
    <li> <strong>1187</strong>: Temujin marries a woman from the Onggirat tribe.</li>
    <li> <strong>1187</strong>: Temujin rescues his wife from the Merkit tribe.</li>
    <li> <strong>1206</strong>: Temujin is named Genghis Khan of the Mongolian Empire
    <li> <strong>1209</strong>: Genghis begins his first foreign war.</li>
    <li> <strong>1215</strong>: Genghis defeats Zhongdu by starving the residents into submission. </li>
    <li> <strong>1218</strong>: Shah Muhammad sends Genghis a head, refusing his offer of surrender</li>
    <li> <strong>1220</strong>: Genghis storms across Central Asia.</li>
<li><strong>1226</strong>: Genghis begins his final campaign.</li>
<li><strong>1226</strong>: Khan dies, possibly due to prior injuries.</li>
    </ul>
    </div>
    <div><p><em>If you want to read more about Genghis Khan, <a id="tribute-link" href="_blank" target="_blank">click here</a></em></p></div>
    </body>
  </main>
  </html>

EDIT: After further testing I found out that what was causing that my image wasn’t read as centered were the borders. So I had to remove them in order for my image to be perceived as centered

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