Changing arrow padding bootstrap carousel

I can't figure out how to change the padding/spacing between the arrows in angular bootstrap carousel

I want the spacing to be smaller on each size of the arrows:

I want the spacing to be smaller on each size of the arrows, So the black spacing is getting more space.

My code:

<div >
<ngb-carousel *ngIf="images">
  <ng-template ngbSlide>
    <div >
      <img [src]="images[0]" alt="Random first slide">
    </div>
    <div >
      <app-nyheter></app-nyheter>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div >
      <img [src]="images[1]" alt="Random second slide">
    </div>
    <div >
      <h3>Second slide label</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div >
      <img [src]="images[2]" alt="Random third slide">
    </div>
    <div >
      <h3>Third slide label</h3>
      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
    </div>
  </ng-template>
</ngb-carousel>
</div>

css:

img {
  width: 100%;
  height: 100vh;
}

.carousel-caption {
  background-color: rgba(0, 0, 0, 0.8);
  height: 95%;
  margin-top: 20px;
}

h3 {
  margin-top: 20px;
}

CodePudding user response：

ngb-carousel arrows are styled by css classes carousel-control-prev and carousel-control-next wich determine the position of the arrows in an absolute way. Override these classes in your css with letf and right values you want:

.carousel-control-prev {
    left: 'whatyouwant'px;
}

.carousel-control-next {
    right: 'whatyouwant'px;
}

CodePudding user response：

I managed to change the spacing by adding it to another class, but now the problem is that I cant change the position of the arrow itself.

.carousel-caption {
  background-color: rgba(0, 0, 0, 0.8);
  height: 95%;
  margin-top: 20px;
  left: 5%;
  right: 5%;
}