How to position elements outside the container using bootstrap?

Question

in my example I need to put an image out

The code is like this

    <div class="img-mobile">
        <img src="{{asset('assets/front/img/contato/jeep-img.jpg')}}" alt="Imagem do carro Jeep">
    /*aqui a  imagem vai aparecer no mobile, pq no layout ela fica em cima de tudo, então aqui você ignora */
    </div>
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
            </div>
            <div class="col-xl-5 offset-xl-1 col-md-6 col-sm-12">
                <div class="box-text">
                    <h2>
                        Gostou de algum veículo</br>
                        ou está alguma dúvida?
                    </h2>
    
                    <p>
                        Entre em contato conosco,</br> 
                        esclarecemos da melhor forma.
                    </p>
                </div>

                <div class="img-box">
    /* aqui que está a imagem que preciso coloca-la pra fora do container */
                    <img src="{{asset('assets/front/img/contato/jeep-img.jpg')}}" alt="Imagem do carro Jeep">
                </div>
            </div>

            <div class="col-xl-4 offset-xl-1 col-md-6 col-sm-12">
                <form action="">
                    <input type="text" placeholder="Nome" required>
                    <input type="text" placeholder="Endereço">
                    <input type="number" name="" id="" placeholder="Telefone">
                    <input type="text" placeholder="Cidade">
                    <textarea placeholder="Mensagem" name="" id="" cols="30" rows="10"></textarea>
                    <button class="btn" type="submit">Enviar mensagem</button>
                </form>
            </div>
        </div>
    </div>
</section> 

my css:

  
  background: linear-gradient(270deg, #DEDEDE 50%, #fff 50%);


  @include media-breakpoint-down(sm) {      
    background: #DEDEDE;
    margin-top: 97px;
  }

  .img-mobile {
    
    img {
      display: none;

      @include media-breakpoint-down(sm) {      
        width: 100%;
        display: block;
      }
    }
  }

  .box-text {

    @include media-breakpoint-down(sm) {
      text-align: center;
      margin-top: 64px;
    }
    
    h2 {
      color: $secondary;
      font-family: 'ibm_plex_sansbold';
      line-height: 2rem;
      font-size: 1.87rem;
      margin-bottom: 30px;

      @include media-breakpoint-down(sm) {      
        font-size: 1.37rem;
      }

      &::before {
        content: '';
        width: 83px;
        height: 0.25rem;
        background-color: $primary;
        display: block;
        margin-bottom: 21px;

        @include media-breakpoint-down(md) {
        }

        @include media-breakpoint-down(sm) {        
          margin: 0 auto 1.25rem;
        }
      }      
    }    

    p {
      font-family: 'ibm_plex_sanslight';
      font-size: 1rem;
      line-height: 1.5rem;

      @include media-breakpoint-down(sm) {      
        font-size: 0.87rem;
        margin-bottom: 0;
      }
    }
  }

  .img-box {
    margin-top: 92px;
    
    @include media-breakpoint-down(sm) {      
      margin-top: 0;
      display: none;
    }
    
    img {
      width: 100%;

      @include media-breakpoint-down(sm) {      
        margin-top: 0;
      }
    }
  }

  form {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;
    padding-top: 395px;

    @include media-breakpoint-down(sm) {      
      padding-top: 40px;
    }
    
    input {
      width: 100%;
      border: none;
      border-radius: 15px;
      padding: 18px 27px
    }

    input::placeholder {
      color: $secondary;
    }

    textarea {
      border-radius: 15px;
      width: 100%;
      padding: 24px 27px
    }

    textarea::placeholder {
      color: $secondary;
      font-size: 14px;
      font-family: 'ibm_plex_sansregular';
    }

    .btn {
      font-family: 'ibm_plex_sansbold';
      color: $white;
      font-size: 1rem;
      line-height: 1.87rem;
      padding: 9px 38px; 
      background-color: $secondary;
      border-radius: 27px;
      border: none;
      cursor: pointer;
      transition: background 0.3s;
      margin-bottom: 177px;

      @include media-breakpoint-down(sm) {      
        margin-bottom: 98px;
      }

      &:hover {
        background-color: $darkblue2;
      }
    }
  }
}