I have a box at the bottom of the page (Crowne Plaza logo + Best Price Guarantee) that has 2 images side by side. As the screen narrows they go on eon top of the other, which is normal and desirable. However, the second image comes out of the box at very low screen width around 300px
I tried a number of things including putting the second image inside its own div, but then the 2 images no longer stay side by side at high screen widths.
Just like many of your previous problems, this is due to your use of margin/padding.
You gave the “Best Price” image uneven padding on the sides. Try giving it a uniform padding of 20px all round. Then to make it fit the box and maintain aspect, give the image box-sizing: border-box with max-width: 100% and height: auto
You should also snip the 40px of white space off your Best price guarantee image because although the image is centred you have 40px off white space ion the image itself making it look off.