Image not taking the entire width of its container

Dear campers,

I want an image to take up entire width of its container. I tried using:

  display: block;
  width: 100%;
  height: auto;

but there is a small part of the container to the right which the img doesn’t cover. The image has dimensions of at least 1200 x 400 px. I wonder what is wrong. There is a pen Here.

Just do something like 102%. CSS does that sometime when you apply 100% to a child that is inside a parent component.


The image on the pen is the same you’re trying to adjust?

Yes. It is the same image.

In that case, the image has a transparent space. Edit the image and remove that space :slight_smile: or set the background to the same color of the image:

1 Like

What could be the reason for the transparent space?

No idea LOL :laughing:!

It has something to do about how the picture was taken/saved/stored, so I can’t really tell :sweat_smile:.

I used opera to take snapshots of five different web pages but some are okay. I guess i just have to edit them. Thanks.

1 Like