angular ngx-bootstrap carousel not centered

Question

I am trying to use Carousel from ngx-bootstrap, but the layout it's not as I expect.

I added some style CSS to center it, but still it's not working, here is how it looks:

and here is my code in component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  styles: [`.carousel { margin:0px auto }`]
})
export class AppComponent {
  title = 'app';
}

and here is my HTML template:

<carousel>
  <slide>
    <img src="assets/images/nature/5.jpeg" alt="First slide">
  </slide>
  <slide>
    <img src="assets/images/nature/6.jpeg" alt="Second slide">
  </slide>
  <slide>
    <img src="assets/images/nature/7.jpg" alt="Third slide">
  </slide>
</carousel>

Thank you for your help!

Answer 1

It worked when I changed from:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">

to version 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

in the index.html