Background image of a column goes to end of screen

I have a WordPress block I've made and I'm trying to get the image (background image) to break the container and extend beyond to the end of the screen. How can I achieve this?

enter image description here

.container {
  max-width: 80%;
  margin: auto auto;
}

.row {
  display: flex;
  flex-direction: row-reverse;
}

.col {
  flex-basis: 50%;
}

.border {
  border-bottom-left-radius: 50%;
}

.btn {
  padding: 5px 10px;
  background: blue;
  color: white;
}

.body {
  margin-bottom: 15px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col border" style="background: url('https://plus.unsplash.com/premium_photo-1694825173871-7b5df4d57ba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2310&q=80') no-repeat center/ cover; min-height: 460px;">
    </div>
    <div class='col'>
      <h2 class='copyimage__title'>My Title</h2>
      <div class=" body">This is the copy</div>
      <div class="align-items-center">
        <a href=" #" class="btn btn-primary">
                  Button
                </a>
        <?php endif; ?>
      </div>
    </div>
  </div>
</div>

Solution

You can set a negative margin to .border. But for this you need to know the width of the .container.

I see you set .container { max-width: 80%; }. It doesn't work now because bootstrap styles are added later. But for an example solution to your problem, we'll add !important and assume the width of the container is 80vw.
Then we set .border { margin-right: calc((100vw - 80vw) / -2) }

P.S. You will have to now also install body{ overflow-x:hidden; } because vw don't take scrollbar into account. In bootstrap, by the way, the width of the container is fixed. You can put it in a css variable and use it in a similar way. It's a wonder they haven't done it yet...

body {
  overflow-x: hidden;
}

.container {
  --container-width: 80vw;
  max-width: var(--container-width)!important;
  margin: 0 auto;
}

.row {
  flex-direction: row-reverse;
}

.col {
  flex-basis: 50%;
}

.border {
  border-bottom-left-radius: 50%;
  margin-right: calc((100vw - var(--container-width)) / -2); /* 👈 */
}

.body {
  margin-bottom: 15px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col border" style="background: url(https://plus.unsplash.com/premium_photo-1694825173871-7b5df4d57ba5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2310&q=80) no-repeat center/ cover; min-height: 460px;"></div>
    <div class="col">
      <h2 class="copyimage__title">My Title</h2>
      <div class="body">This is the copy</div>
      <div class="align-items-center">
        <a href="#" class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
</div>