Tribute page: issue with text-align:center

Hi! I tested my page on codepen and I had a problem regarding the layout:

“2. The element should be centered within its parent element.”

It looks that I have managed to correct it since it came back 100% correct, meaning all the requirements were met, however my image (in Chrome) and the image caption still doesn’t show centered. I feel unsure of my “code” in this section:

max-width: 500px;
text-align: center;
padding: 6px;

#img-div img{
display: block;
height: auto;
margin: auto;
max-width: 100%;

I want to leave the website as simple as it is now, I’m just concerned about the image centering, I hope someone can help me out. I use Brackets, if that’s relevant information.

Here is the whole project:
Thank you!

you can give your #img-div

margin: 0 auto;

This will horizontally center your img-div.

1 Like

Thanks, @shimphillip, it worked in the browser and on codepen as well :slight_smile:

1 Like

No Problem!

Just want to let you know that your image is broken on codepen for other people.

You will need to use a different source to host your image for others to see it.

1 Like

Fixed! :slightly_smiling_face:

1 Like

Good job! it looks pretty good.

You can eventually work on making it responsive as well.

1 Like