Hello. I am having some problems with pictures not properly displaying on a website. I have added the picture and created a div.tag for it and also added it to the CSS but it simply will not show properly. I will attached some pictures so you can see how it is being cut off.  It is really baffling me why the new pages I have added have the pictures being cut off while the older pages render the pictures perfectly. The Eastcheap picture is how the size should be (more square) but they are showing more rectangular. Any help would be massively appreciated. Kind Regards

The row-projects class contains the two content div.

A div by default has zero height.

The means they will resize the fit the content. The content it uses for this is the text on the right not the image on the left (which incidentally doesn't display for me).

Try using display:grid or display:flexbox. Bootstrap is very dated and was never very good in the first place.

As an aside. You don't need 4000+ lines of CSS for such a simple site.