Problems with foreach in php

I made a foreach with PHP and a .json file to simulate a mini store inside a thumbnail in a slide , but it is not appearing properly side of the other as it should be. I wonder where I'm going wrong.

How are you currently:

PHP:

<divclass="slide-best-sallers owl-carousel">
    <div class="item">
        <div class="row">
            <div class="col-md-12 text-center">
                <div class="thumbnail">
                    <?php
                    $json_url = "products.json";
                    $json = file_get_contents($json_url);
                    $links = json_decode($json, TRUE);
                    ?>
                    <?php
                    foreach($links['products'] as $key=>$val){ 
                        ?>
                        <img src="<?php echo $val['imgUrl']; ?>" alt="<?php echo $val['alt']; ?>">
                        <div class="caption" >
                            <p class="description"><?php echo $val['nome']; ?></p>
                            <h3 class="price"><?php echo $val['preco']; ?></h3>
                            <p class="plots"><?php echo $val['parcelas']; ?></p>   
                            <p class="free-shipping">Frete grátis</p>
                            <a href="#" class="btn btn-primary button-salle" role="button">Comprar <i class="fa fa-shopping-cart" aria-hidden="true"></i></a>
                        </div>
                        <?php
                    }
                    ?>
                </div>
            </div>
        </div>
    </div>
    <div class="owl-dots disabled">
        <div class="owl-dot active"><span></span></div>
        <div class="owl-dot"><span></span></div>
    </div>
</div>  

JS slide:

//Slide products
$('.slide-best-sallers').owlCarousel({
    loop:true,
    margin:10,
    dots: true,
    loop: true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:3,
        }
    }
});

Json File:

{
    "products": [
        {

            "imgUrl": "img/logo.png",
            "alt": "notebook acer",
            "nome" : "notebook 2 em 1 Acer - Windows 10",
            "preco" : "R$999,99",
            "parcelas" : "10x de R$99,00"
        },
        {
            "imgUrl": "img/logo.png",
            "alt": "notebook acer",
            "nome" : "notebook 2 em 1 Acer - Windows 10",
            "preco" : "R$999,99",
            "parcelas" : "10x de R$99,00"
        }
    ]
}