Responsive not working

[Andrew-Samir]

I have an issue working with responsive option and items option in owl carousel
i use owl carousel in a container as follow

<div class="container">
            <div class="row">
                <div class="col-10 p-0 offset-1">
                    <owl-carousel-o [options]="customOptions">
                        <ng-container *ngFor="let theme of themes; let i = index">
                            <ng-template carouselSlide [width]="140" [id]="setCarouselID()">
                            <div class="theme-thumb" 
                                [ngClass]="{ selected: selected_theme && selected_theme.id === theme.id}" 
                                (click)="selectTheme(theme)"
                                [ngStyle]="{ backgroundImage: 'url(' + theme.file_preview + ')'}">
                            </div>
                            </ng-template>
                        </ng-container>
                    </owl-carousel-o>
                </div>
            </div>
        </div>

    i set a fixed width for 140 px and used autoWidth to true and i set items to 4 to show only 4 slides for large screens 
    here is my options
   ```

customOptions: OwlOptions = {
autoWidth: true,
loop: false,
margin: 16,
rewind: false,
dots: false,
navText: [ '<', '>' ],
mouseDrag: true,
touchDrag: true,
pullDrag: true,
navSpeed: 700,
nav: true,
responsive: {
0: {
items: 1
},
200: {
items: 2
},
400: {
items: 3
},
600: {
items: 4
}
},
}

  although considering the responsive is calculated from the parent width, its not working and the carousel showed 6 items for bigger screens and when resize it shrinks not using responsive