Owl crousel displaying only 3 items. As per setup it should display 6 with 10px margin

Question

html for owl carousel

<div class="owl-carousel _fproducts">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>

JavaScript setup code for owl carousel

$(document).ready(function(){
    console.log('carousel setup')
    $('._fproducts').owlCarousel({
      loop:true,
      margin:10,
      nav:true,
      dots:false,
      responsive:{
        0:{
          items:1
        },
        600:{
          items:4
        },
        1000:{
          items:6
        }
      }
    })
});

and final output

and final result is this, with no margin and I am expecting 6 items on screen it is showing just 3 which is not mention anywhere in code. jQuery working fine.