The <img> element should be centered within its parent element.Am not understanding here kindly help

HTML-CSS
1 
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<div id="main">
  <h1 id="title">Manchester United</h1>
    <div id="img-div">
      <a id="tribute-link" target="_blank" href="https://www.youtube.com/watch?        v=RHlcHVvdToo">
      <img id="image" src="https://encrypted-tbn2.gstatic.com/images?     q=tbn:ANd9GcQdidTvjgPdvdjwtelmSx8kkV6mhHETmS18aQKb7f6vqEgIYKrf" alt="Logo for Manchester"></a>
      <figcaption id="img-caption">This is  a logo for Manchester United F.C.Manchester United is one of the biggest Football club in England</figcaption>
  </div>
  <p id="tribute-info">
    <strong>Manchester United Attribute</strong>
    <ul>
      <li>Strong team</li>
      <li>Capable</li> 
    </ul>
  </p>

</div>

above is my code and I have done all the steps as instructed but scoring 9/10 what might be the mistake I :point_left: have done?

2

It seems you forgot to link the code.

3

Hello there,

I’ve edited your post for readability. 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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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

4

tags missing…

5

@jemo, a couple of things;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
  • When a test fails, click the red button to see which test(s) are failing and text to help you correct the issue.
    • Be sure and read more than just the first line of the failing message. The ability to read and comprehend error messages is a skill you’ll need to acquire as a developer. Ask questions on what you don’t understand.

The first failing message says

I should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page.
expected null to not equal null
AssertionError: expected null to not equal null

Do you understand what the test is looking for?

I’ll let you apply the above principles and resolve the second failing message.

6

The <img> element should be centered within its parent element. kindly am stuck here.

7

@jemo, as stated previously

You gave the first line of the failing message. The full failing message says

The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size.
Try using the "max-width" style property : expected 'none' to not equal 'none'
AssertionError: Try using the "max-width" style property : expected 'none' to not equal 'none'

Also, it was explained in a previous post how to format your code when you put it into the forum.
It’s hard for people to understand what’s going on when you edit previous code with new code rather than posting your new code.

It’s also much better and easier if you’d post a link to your pen. Or the link to where you have your live project.
I understand you may be developing locally but when you submit your project it has to be a live link. Post that for us please as it makes it easier to debug when we don’t have to cut/paste.

8

Two things.

No.1:
I reformatted your code.
When a moderator formats your code please leave those changes in place.
Please do not revert back to the unformatted version.

No.2:
I closed your other duplicate post for this question.

Please write your replies in this post only.

Thanks!

9

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