How to have carousel arrows on either side

Site URL: https://finch-tan-bd4p.squarespace.com/

Hi,

Website I'm working on: https://finch-tan-bd4p.squarespace.com/

Password: serene

I managed to have the arrows for a summary carousel to be on either side at the top.

But I would like it to be on the side of the words instead of the top, without it overlapping the text. 

I've attached photos of what I wish to achieve.

this is the code I achieved the arrows being on their side at the top:

But this is what currently happens when I put it a bit lower:

This is what it currently looks like: 

@tuanphan you probably know the answer to this? would appreciate it if you do! 

Keep above code, and add below code

div#block-yui_3_17_2_1_1581904334073_30906 {
    position: relative;
}
.summary-carousel-pager .next {
    position: absolute !important;
    left: inherit !important;
    right: 5% !important;
    top: 1px !important;
}
.summary-carousel-pager .previous {
    position: absolute !important;
    left: 5% !important;
    right: inherit !important;
    top: 1px !important;
}

@tuanphan oh I added what you said, and changed it up a bit so the arrows go lower:

But it's still the same:

Sorry sometimes I'm very bad at explaining things 😅

But basically I want the arrows not to overlap the testimonial section.

I've tried adding this code to force it to be between the two arrows:

.summary-exerpt {width: 50%;}

but it ends up looking like this:

thanks so much for your help so far!!

8 hours ago, wholeheartcreative said:

@tuanphan oh I added what you said, and changed it up a bit so the arrows go lower:

 

But it's still the same

 

Sorry sometimes I'm very bad at explaining things 😅

But basically I want the arrows not to overlap the testimonial section.

I've tried adding this code to force it to be between the two arrows:

.summary-exerpt {width: 50%;}

but it ends up looking like this:

thanks so much for your help so far!!

top: 1px

not 45%