Can't pass the Tribute Page test - can't center an image

Hello everyone.

Trying to complete the Tribute Page project but I can’t - can’t pass the “center an image” step.

I have everything needed to pass it:

img {
    display: block;
    margin: 0 auto;
}

but it doesn’t work.

What’s the problem?

The problem was in the “main” and “img” selectors rules:

main {
  max-width: 50%;
}

img {
  max-width: 100%;
}

Changed the value of the “max-width” rule in the “img” selector rules to “98%”, and was be able to pass the test.

Hi @anotherone.myemail !

Welcome to the forum!

I was able to pass the test by reducing the width of your border to 5px.

  border: 5px solid rgba(0, 0, 0, 0.2);

I didn’t change anything else and it passed for me.

1 Like

Hello there @anotherone.myemail

Instead, change your max-width to 98% or changing your border to 5px, just apply box-sizing border-box.

Use box-sizing border box when you use sizes with the percentage. By default when you apply a size, the size is applied in the content box area that means your element will have the size of the content area plus the padings plus the borders.

When you set it to be “border box” you are defining that the total size is what you are defining regardless of the summation of the content area plus padding plus borders.

MDN > CSS > box-sizing

In the link below you will have a better understanding of what is happening

MDN > CSS > The box model

1 Like

Thank you!

I didn’t know about this CSS property

Hi @anotherone.myemail

For quick consulting, you can use the links below.

On each site when you choose something you will have links to more documentation, look in the image.

https://cssreference.io/
https://htmlreference.io/

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