Tribute Page - Build a Tribute Page- Center Image within its Parent

HTML-CSS
1

Tell us what’s happening:
I’m having trouble centering my image, any suggestions on what I’m doing wrong?
Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
<title id="title">Sani Abacha</title>
<h1>Sani Abacha</h1>
<p>The Tyrant We've Never Forgotten</p>
</head>
<body>
  <main id="main">
    <div id="img-div" class="square">
      <img id="image" alt="General Sani Abacha" src="https://guardian.ng/wp-content/uploads/2018/09/Sani-Abacha.-Photo-All-Africa.png">
      <figcaption id="img-caption">The Former Head-of-State</figcaption>
      </div>
      <section id="tribute-info">
        <h2>A Glimpse Into His Life</h2> 
<ul>
  <li><b>1943</b>  Born on 20th September, in Kano State, Nigeria.</li>
  <li><b>1963</b> <ul>
  <li>  Passes out from Nigerian Military Training Center, Kaduna.</li>
  <li>  Furthers his training in the UK.</li>
  </ul>
  <li> <b>1965</b>  Marries Maryam Jiddah whom he has 10 children with.</li>
  <li><b>1967-72</b>  Fights in the Nigerian Civil War</li>
  <li><b>1983</b>  Participates in a coup to over-throw President Shehu Shagari and installing General Muhammadu Buhari</li>
  <li><b>1985</b> Helps over-throw General Buhari instating General Ibrahim Babangida. 
  Promoted to major-general</li>
  <li><b>1993</b> 
  <ul>
    <li><i>August</i> Appointed Minister of Defense. Creates interim government lead by President Ernest Shonekan</li>
    <li><i>17 Nov</i> Gains power from Shonekan</li>
  </ul>
  <li><b>1995</b> Nigeria is suspended from Commonwealth after Ogoni Nine execution</li>
  <li><b>1996</b> Elected chairperson of ECOWAS</li>
  <li><b>1998</b> 
  <ul>
    <li><i>March</i> Restores democracy in Sierra Leone</li>
    <li><i>June 8</i> Dies of apple poisoning</li>
</ul>
        </section>
        <footer>Read more about <a id="tribute-link" target="_blank" href="https://www.bbc.co.uk/news/resources/idt-f9f1cd17-2c50-442e-88fc-e2deb46dbde1">Sani Abacha</a>      </footer>
    </main>
    </body>
  </html>

/* file: styles.css */
img{
  width: 300px;
  height: 350px;
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: 450px;
  margin-right: 350px;
  text-align: center;
  object-fit: contain;
  border-radius: 20px;
  border: solid 30px;
}
body{
  text-align: center;
  background-color: #6b8e23
}
h1{
  font-size: 60px;
  font-family: Engravers MT;
}
ul{
  spacing: 120px;
  display: block;
  list-style-type: circle;
  margin-top: 1em; 
  margin-bottom: 1em; 
  margin-left: 0;
  margin-right: 0;
  padding: none;
  line-height: 20px;
}
.square{
  text-align: center;
 background-color: #9acd32;
 margin-left: 00px;
 margin-right: 0px;
}
#image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

Your image appears to be centered to me, and you pass all the tests

image
image1178×753 147 KB

3

For me, it says my image isn’t centered
What could the problem be?

Screenshot (14)
Screenshot (14)1366×768 311 KB

4

I’ve even tried changing my browser.

5

I see what the issue is. Look at the failing test and notice the # Infront of image. Do you remember what # stands for? Look at your CSS, you are styling the img element itself, but according to the error you need to make a change to the img in the css. By that I mean add something Infront of img and it should pass. Think you can figure it out?

Edit: I didnt see you had #img at the bottom. If you just add # to the top img in your css then it passes, but that wouldnt be the correct way because you would have two img id’s and you can only have one id with the same name. I would try the below comment.

6

you have a thick border around your image which is causing the confusion.
Add this line of code to your image selector css

box-sizing: border-box;

this makes the size of the image take into account the border size as well as the padding.

7

That solved my problem.
Thanks for the help!!!

8

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