bootstrap 5 space-between misaligned

I have some HTML/CSS where I am trying to make use of Bootstrap 5.2 and justify-content-between to push 2 buttons out to the edges of the container.

<div class="container"><div class="row"><div class="col-12"><ul class="d-flex justify-content-center align-items-center bg-grey"><li>Test</li></ul></div><div class="col-12"><div class="row justify-content-between"><div class="col-2 text-start"><button class="btn btn-primary btn-lg">LEFT</button>    </div><div class="col-2 text-end"><button class="btn btn-primary btn-lg">RIGHT</button></div></div></div></div></div>

This is how I want it to look - with the LEFT and RIGHT buttons aligned to the edges.

It's fine until the viewport reaches anything under 768px wide (sm or xs), at which point the RIGHT button sticks out.

I can tweak the margin at the relevant responsive break points but it seems like I've got something wrong and shouldn't have to do that.

Is there a correct / better way to achieve this?