Image not using the width I am expecting

I have been trying to adjust an image that should appear wider than it is. I can’t figure out why. Out of 5 images 4 are looking fine but the 5th not.

As you can see here, the with of the horizontal picture appears to be 660px whereas I am expecting 690px. Any idea what I am missing?

Your div 2 levels above the image has a padding of 15 pixels on each side.

You nested a .row inside another .row which you can’t do in bootstrap unless the row is inside a column otherwise it needs to be a direct child of .container.

The container, column and rows all work together and their structure should not be changed.

If you put the row inside a column then it will produce this:

Thank you @PaulOB

Thank you for your suggestion. It did indeed correct the issue.
I am happy with that but I still I would like to go to the bottom of the issue because I managed to have it working without the col class. If you look at my sample I have got the first version with your suggestion “With column” working fine.

My doubt is that I have got a 2nd version “Without column OK” which appears fine and I don’t see the difference with the original version “Without column KO” that makes it OK.

I’d need to see the mark up but as long as .row is not badly nested badly then it should work ok.

Indeed in your original example you didn’t need the row anyway and could have gone straight to the column.

i.e.

Look at the html structure that I changed as I removed the nested row.

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