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