Center Logo, Image Aspect Ratio, Gallery Lightbox Conflict, Mobile Compatibiity

Hi, it has been three weeks since I posted the above.

I am having significant issues with responsive images loading outside the boundaries of the blog post column across devices. Specifically, if I size images on my computer, they appear too large off the screen, and if there is a small gallery, the images overlap.

Can you please reply?

Hi

Could you please post your website link here and explain the issues little bit more?

Thanks,
Qaiser

https://LuxuryAdvisor.online

I have attempted to correct the issue by inserting code as follows from another post:

.entry-content img {
width: 100%;
height: 100%;
}

.entry-content iframe {
width: 100%;
height: 100%;
}

.featured_image img {
width: 100%;
height: 100%;
}

Please note the following issues:
BEFORE CODE:
1. Images, including feature image, are not responsive; they remain the same size on every device and browser. If I size them for laptop, mobile is too large (outside bounds of text column bleeding into the sidebar)
2. Lightbox gallery images overlap.
AFTER CODE:
1. ALL images are responsive to full width of website:
a. thumbnails of gallery get stretched to fill width (images do not have border or space between)

I would like to be able to create images that are responsive to their respective width when I create a post. So if the image is 80% width, for that to be the width on every device. Also, if the image is side by side with text, for the text to wrap around the image, not above and below.

Thank you