Tribute Page - Need help with "Your #image should be centered with its parent

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

I am having trouble passing the test to center my image with its parent. Anyone have any advice on where I can improve/fix my code?

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" />
    <title>Tribute Page</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main id='main'>
      <div id='header'>
      <h1 id='title'>Tim Berners-Lee</h1>
      <p id='title-context'>The man who invented HTML</p>
      </div>
      <div class='border'></div>
      <div id='img-div'>
        <img id='image' src="https://amazingworkz.com/wp-content/uploads/2019/12/00_13.jpg" alt='placeholder'/>
        <figcaption id='img-caption'>Caption Placeholder</figcaption>
      </div>
      <div class='border'></div>
      <section id='tribute-info'>PlaceHolder</section>
      <div class='border'></div>
      <div id='footer'>
        <p id='link-text'><a id='tribute-link' target='_blank' href='https://en.wikipedia.org/wiki/Tim_Berners-Lee'>Click here for more info onTim Berners-Lee.</a></p>
      </div>
    </main>
  </body>
</html>

/* file: styles.css */
* {
  font-family: helvetica, arial, sans-serif;
}

body {
  color: white;
  background-color: #17191e;
}

#image {
  display: block;
  max-width: 100%;
  height: auto;
  width: 900px;
  margin: 20px auto;
  padding: 10px;
  background-color: white;
}

#img-caption {
  margin-bottom: 20px;
  margin-top: -15px
}

#header, #tribute-info, #img-caption {
  text-align: center;
}

#title {
  font-size: 40px
}

#title-context {
  font-size: 15px;
  margin-top: -28px;
  margin-bottom: 20px
}

.border {
  border: 2px solid;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  max-width: 920px;
  width: 100%;
}

#tribute-info {
  margin-bottom: 10px;
}

#link-text, #tribute-link {
  text-align: center;
  color: white;
  cursor: pointer;
  text-decoration: none;
  
}

Your browser information:

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

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

2

you can use the browser developer tools to review the image placement
(right click on your image and choose Developer tools. Then review the styling being applied including any padding or margins etc)

Edit: when I remove the padding in the #image block, the test passes.

3

Thank you, removing the padding worked!

1 Like
4

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