Banner on Collection Page auto adjust

[Kim_Tech]

Hello I amusing Venture Theme and I have a code that can put a Banner/Image on the Collection Image, and it's pretty good. However, every time I zoom out the image size is not adjusted, Below is the code I used

i put this above of {% paginate collection.products by 20 %} on collection.liquid of theme 

{% if collection.handle == 'life-by-kojiesan' %}
<img src="https://cdn.shopify.com/s/files/1/0522/1046/6966/files/LIFE_BY_KOJIESAN.jpg?v=1613549427"/>
{% endif %}

can you please help me to make it auto resize every time i zoom out, below is the picture of what it looks like if I zoom out 

I zoom out 33%, it will be better than if I zoom out this it adjusts automatically like the image on the homepage, there will be no blank space on another side. 

Thank you

[Pallavi]

Hello There,

Please share your store URL.
So that I will check and let you know the exact solution here.

[Kim_Tech]

https://shop.bevi.com.ph/collections/kojiesan

[Pallavi]

Hello There,

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

main#MainContent {
margin-top: auto;
}

working is good
Screenshot :- https://prnt.sc/zu6jzu

[Kim_Tech]

main#MainContent { margin-top: auto; }

i just copy this only no need to change anything?

[Kim_Tech]

the code is not working i just copy what you gave at the bottom of theme.scss.liquid but still if I zoom out my collection page the image still not responsive to adjust or is their a way that if I zoom the image will just go to center instead of left side

again this is the code I use for image of collection page above

{% if collection.handle == 'kojiesan' %}
<img src="https://cdn.shopify.com/s/files/1/0522/1046/6966/files/KOJIE-SAN_622d692e-ff31-4cb2-91b1-244ee6fee12...>
{% endif %}

i pasted it above of paginate