Center two individual text boxes using a container

Site URL: https://www.australianwildlifehealthinstitute.org

Hi there, 

I have two individual text boxes on my home page which I'm trying to center as if it were one div? My best guess is containers /flex, but I can't figure out the correct code to make this happen. 

I've been trying to figure this out for the last few hours now and can't for the life of me figure out why it's behaving like it is!

As an aside, when you currently resize the window the text with the green background doesn't wrap/move underneath when there isn't enough space. Instead it overlaps the AWHII, which I believe has something to do with the fix width sizes?

pw: awh11

#1. You mean banner text or white section text?

3 hours ago, tuanphan said:

#1. You mean banner text or white section text?

Sorry, I mean both the AWHII/Australian Institu.. and the white section text.

I'm trying to move them from this..

To this, essentially a container centered.. 

And then rather than re-sizing width when scaling I instead want them to stack like this when there is insufficient room..

Right now when you scale the window the white text overlaps rather than moving below. Feel like I've tried everything!

Add to Design > Custom CSS

/* Stacked banner on smaller screens */
@media screen and (max-width:1024px) and (min-width:768px) {
div#page-section-61e6512837970d62dea5cc13>.row>.col {
    width: 100%;
}
}

On 1/21/2022 at 3:51 PM, tuanphan said:

Add to Design > Custom CSS

/* Stacked banner on smaller screens */
@media screen and (max-width:1024px) and (min-width:768px) {
div#page-section-61e6512837970d62dea5cc13>.row>.col {
    width: 100%;
}
}

 

Thanks @tuanphan , unfortunately that didn't quite solve my problem. 

I've changed the design slightly and now I have an image and a text box rather than two text boxes. Is it possible to horizontally align these and then force both them to maintain their sizes rather than rescaling as the screen width decreases? I'm now trying to keep both blocks the same size and have them wrap once the screen width is too small to fit the site margins. 

As you can see when the screen size decreases things start to look off.