Custom Created Image Banner Is Not Responsive When Zooming Out

Store Design
, ,
1

When I zoom out a space in the side of the image banner appears (Image below), I took the CSS and Html code from ChatGPT, but apparently, there is a problem. (The code is below the images)

Website: Daxuen.com (Home page)

Daxuen_1-1692048432598.png
Daxuen_1-1692048432598.png1897×859 438 KB

First Image Banner Code:

.image-wrapper { display: flex; flex-wrap: square; justify-content: space-between; } .image-wrapper a { flex: 1 0 auto; margin: 1px; max-width: 50%; position: relative; overflow: hidden; } .image-wrapper a img { max-width: 100%; height: auto; display: block; border-radius: 0px; transition: transform 0.7s ease-in-out; } .image-wrapper a:hover img { transform: scale(1.03); } /* Media query for screens with a maximum width of 767px (i.e. mobile devices) */ @media (max-width: 767px) { .image-wrapper { flex-wrap: nowrap; justify-content: center; align-items: center; flex-direction: column; } .image-wrapper a { max-width: 100%; margin: 1px 0; } }
New in DAXUEN

Second Image Banner Code:

DAXUEN Tees shop all trending unisex shirt and t-shirts DAXUEN Bottoms. Shop all trending bottoms from DAXUEN. Cargo pants, oversized baggy, parachute cargo and more DAXUEN Jackets and Coats. Shop all trending jackets for this winter DAXUEN Hoodies. Find trending hoodies this year.
.image-wrapper { display: flex; flex-wrap: square; justify-content: center; } .image-wrapper a { display: block; margin: 1px; width: calc(25% - 20px); } .image-wrapper a img { max-width: 100%; height: auto; transition: transform 0.7s ease; } .image-wrapper a:hover img { transform: scale(1.03); } @media (max-width: 768px) { .image-wrapper { flex-direction: column; align-items: center; } .image-wrapper a { width: 100%; } }