Css Border are collapse to each other

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

Personalised Goodnight Storybook - Girl

Rs. 1,350 -->

 <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 try 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;
}