Carousel Controls Outside of Carousel

I am trying to make a carousel with the control arrows outside of it but no matter what I try the arrows won't get out. If I put the controls code outside the carousel it works but they don't align properly at the sides of the carousel.

Here is the code of the controls on the HTML:

<a class="carousel-control-prev" href="#carouselControles" role="button" data-slide="prev">
            <span class="icon-prev bi bi-chevron-left font-mainColor-s1" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselControles" role="button" data-slide="next">
            <span class="icon-next bi bi-chevron-right font-mainColor-s1" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>

Here is the CSS code:

#myCarousel {
  margin-left: 50px; 
  margin-right: 50px;
}
.carousel-control {
    top: 50%;
  margin: 50px;
}

.carousel-control-prev {
  margin-left: -25px;
}

.carousel-control.next {
  margin-right: -25px;
}

This is how I want it to be:

Example

Any help is appreciated. Thanks.