Css Border are collapse to each other - css

Question

I created a caurosal of 8 products when i apply a border than border are joint to each other. i did not create class because all are created dynamically. if i decrease the width the another product that are hide on another caurosal are shown. how i fix it
<div class="flickity-slider" style="left: 0px; transform: translateX(0%);"><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(0%);">
<a href="/collections/activities-storybooks-kids/products/personalised-goodnight-storybook-girl">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/GOODNIGHT_books-01.jpg?v=1520416066">
<h4>Personalised Goodnight Storybook - Girl</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="81743151117" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 1,350</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" value="Add to Cart">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(100%);">
<a href="/collections/activities-storybooks-kids/products/personalised-goodnight-storybook-boy">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/GOODNIGHT_books-04.jpg?v=1520416051">
<h4>Personalised Goodnight Storybook - Boy</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="81757011981" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 1,350</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" value="Add to Cart">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(200%);">
<a href="/collections/activities-storybooks-kids/products/stories-for-1-year-olds">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/stories_for_1_yr_old_6e9cdfeb-6ba4-4b57-893d-f0165014e016.jpg?v=1495545024">
<h4>Stories for 1 year olds</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="1824342913" id="add-to-cart-form">
<div class="prices">
<span class="price" itemprop="price">Rs. 250</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" disabled="" value="Sold Out">
</form>
</a>
</div><div class="carousel-cell is-selected" style="position: absolute; left: 0px; transform: translateX(300%);">
<a href="/collections/activities-storybooks-kids/products/my-learning-library-first-words">
<img class="img-explore" src="//cdn.shopify.com/s/files/1/0764/5455/products/Learning_Library_-_Words.jpg?v=1537694862">
<h4>My Learning Library - First Words</h4>
<form action="/cart/add" method="post" class="shappify_add_to_cart_form" enctype="multipart/form-data" data-product-id="695380246574" id="add-to-cart-form">
<div class="prices">
<span class="compare-price">Rs. 799</span>
<span class="price on-sale" itemprop="price">Rs. 599</span>
</div>
<input type="submit" name="add" class="btn" id="product-add-to-cart" disabled="" value="Sold Out">
</form>
</a>
</div>
I tried width property. Select first child and nth of type but that product are hide are shown and first product left side of boundary are hide.

Answer 1

you can use this code by adding CSS
.main_div{
display: flex;
column-gap: 10px;
}
/* or */
.card{
margin: 0 10px;
}