Build a Tribute Page: Problem with Full-Width Image

Hi all.

I’ve just started coding for about a month now. I am so grateful to get to know about freeCodeCamp and this forum.

Today I had a try with the first FCC Challenge: Build a Tribute Page. Everything put into practice is so much different from what I’ve imagined!

I keep encountering problems with the image section. Here is the most frustrating one that I haven’t come to resolve yet although I tried to google a lot. The image just doesn’t stretch to the full width of the screen. The original image’s dimensions are 1047x520px but when it displays in the browser, it looks a little smaller than that. Please have a look and tell me what’s wrong here.

Many thanks,
Chi

My code snippet

#img {
width: 100%;
height: auto;
display: block;
margin: auto;
}

My full codepen page for this challenge
chipanpan/full/gyXOwV (this forum doesn’t allow direct link, so please forgive me T__T)

My browser information:

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

looks like your image is actually 640 x 318px after inspecting it.

If you want to make your image full width, give your image width of 100% instead to its parent container div.

Hi @shimphillip . Thanks for your quick response!

After I tried replacing the current image with a Full HD one, it displays correctly at its full width.
So I guess there is problem with my original image.
I will see if the problem persist in my other projects.

Thank you again!