Tribute page: please help me

Good day,
I was wondering if some one could help me with my code. I am a newb with coding and i am doing the tribute challenge page. here is my code:https://codepen.io/donnex777/pen/mdeLGdK
for some reason it passed all the challenges. however if you look at the picture it is not on the center of the webpage. when i added padding on the image and placed it on the center it will tell me that the img is not centered. please help me

kind regards don

Hello!

Please provide a link to YOUR CodePen - the link you have shared leads to FCC’s test script pen. :slight_smile:

1 Like

Are you sharing the right pen, because I cannot find anything on this pen. It’s just a blank document

1 Like

how can i do that. i cannot seem to save my work

i got it working please have a look on the code

You won’t be able to save if you are editing the FreeCodeCamp pen.
You need to click “fork”, down in the bottom right, to create your own pen based on that one - then you can edit and save your pen. :slight_smile:

i’ve got it working. the link is here: https://codepen.io/donnex777/pen/mdeLGdK please have a look

thank you

Okay, here’s what I’ve got.
Try adding a left margin to your img-div so it moves toward the center. You will need to experiment with the value, because your img-div size uses px instead of em or vh/vw.

Hello don,
i understood your problem and the solution is that you need to understand the concept of "flex " first then only you can understand the fault.
SOLUTION:
STEP 1: In HTML file, remove the “img-caption”(id) sentence from the div tag and paste
it seperately under it.
STEP 2:In CSS file, Inside #img-div remove the width property and text-align property.
STEP 3: Add these three property:
display: flex;
flex-wrap: wrap;
justify-content:center;
I hope your problem will be solve and suggest you to go through the concept of flex and grid.

thanks you very much for the help. will do that

that did the trick. i set the margin to auto. it worked wonders. thank you very much