CSS - Posição de imagens

Boa tarde, agradeceria ajuda. Tenho um template de uma página e ao inserir o codigo php para que apareçam 3 imagens escolhidas no BD a exibição deixa de ser inline e passa a ser 1 embaixo da outra. Não entendo porque isso ocorre e ou como resolver. Ja tentei diversas maneiras, alterando o width, alterando o tamanho das fotos, mas sem solução poderiam me ajudar?

segue trecho do html onde eu preciso que ocorra a exibição dos produtos (são 3 já definidos no momento da query no BD) e aparecem 3: obrigado!

<div class="section">
           <div class="container">
               <h2 class="section-title">Estes Você Não Pode Perder!</h2>
               <div class="row">
                    <div class="col-md-4">

                        <div class="card card-product card-plain">
                        <?php 
                $dao=new produtoDAO($conexao);
                $produtos = $dao->pegaDestaques();
                foreach($produtos as $produto) : 
                ?>
                            <div class="image">
                                <a href="produto.php">
                                    <img src="../cadastro/fotos/<?=$produto->getFoto() ?>" alt="foto"/>
                                </a>
                            </div>
                            <div class="content">
                                <a href="#">
                                    <h4 class="title"><?=$produto->getMarca()->getNome() ?></h4>
                                </a>
                                <p class="description">
                                   <?=$produto->getDescricao() ?>
                                </p>
                                <div class="footer">
                                    <span class="price price-old"> R&dollar;<?=$produto->getPreco() ?></span>
                                    <span class="price price-new">R&dollar;<?= $produto->calculaDesconto() ?></span>
                                 </div>
                            </div>
                            <?php endforeach ?>
                        </div> <!-- end card -->

                     </div>
                   </div>
               </div>
           </div>
    </div><!-- section -->

Segue trecho do codigo css onde ocorre as alterações na exibição:

.card {
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.23);
  background-color: #FFFFFF;
  margin-bottom: 20px;
}
.card .image {
  width: 100%;
  overflow: hidden;
  height: 260px;
  border-radius: 6px 6px 0 0;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.card .image img {
  width: 100%;
}