how can the product cards be aligned so that they appear as three inside the section in an orderly m-CodePudding

The product cards appear always aligned to the left but rather it should be properly aligned in an orderly fashion to make it look better.

I tried using the flex property but the items then come aligned in a vertical manner which makes it very uncomfortable.

Is there a way where all three can be displayed in an orderly manner?

This is what it looks like as of now enter image description here

Here is the html and css code snippets used :

<section >
            <div >
              <div >
                  <div >
                      <img src="images/card2.jpg" alt=""  height="350px" width="220px">
                      <button > Add To Cart </button>
                  </div>
                  <div >
                    <span >$59</span><span >$99</span>
                    <h2 >Adidas</h2>
                    <p >Running Shoes</p>
                    
                  </div>
              </div>
            </div>
            <div >
              <div >
                  <div >
                      <img src="images/card4.jpg" alt=""  height="350px" width="220px">
                      <button > Add To Cart </button>
                  </div>
                  <div >
                    <span >$69</span><span >$129</span>
                    <h2 >Reebok</h2>
                    <p >Running Shoes</p>
                    
                  </div>
              </div>
            </div>
            <div >
              <div >
                  <div >
                      <img src="images/card5.jpg" alt=""  height="350px" width="220px">
                      <button > Add To Cart </button>
                  </div>
                  <div >
                    <span >$89</span><span >$149</span>
                    <h2 >Nike</h2>
                    <p >Running Shoes</p>
                    
                  </div>
              </div>
            </div>


CSS: 
    
    .product-container
{
  padding-right:10vw;
  display: inline-block;
  overflow-x: auto;
  scroll-behavior: smooth; 
}
.product-container::-webkit-scrollbar{
  display: none;
}
.products{
  padding: 0 10vw;
}
.product-card{
  flex: 0 0 auto;
  width: 196px;
  height: 600px; 
  margin-right: 40px;
}
.product-image{
  position: relative;
  width: 196px;
  height: 350px; 
  overflow: hidden;
  
}
.product-thumb{
  width:196px;
  height:350px;
  object-fit: cover;
}

CodePudding user response：

Here you go use display: flex on products class.

.product-container {
  padding-right: 10vw;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.product-container::-webkit-scrollbar {
  display: none;
}

.products {
  display: flex;
  gap: 1rem;
  width: 100%;
}

.product-card {
  
  width: 196px;
  height: 600px;
}

.product-image {
  position: relative;
  width: 196px;
  height: 350px;
  overflow: hidden;

}

.product-thumb {
  width: 196px;
  height: 350px;
  object-fit: cover;
}

<section >
  <div >
    <div >
      <div >
        <img src="images/card2.jpg" alt=""  height="350px" width="220px">
        <button > Add To Cart </button>
      </div>
      <div >
        <span >$59</span><span >$99</span>
        <h2 >Adidas</h2>
        <p >Running Shoes</p>

      </div>
    </div>
  </div>
  <div >
    <div >
      <div >
        <img src="images/card4.jpg" alt=""  height="350px" width="220px">
        <button > Add To Cart </button>
      </div>
      <div >
        <span >$69</span><span >$129</span>
        <h2 >Reebok</h2>
        <p >Running Shoes</p>

      </div>
    </div>
  </div>
  <div >
    <div >
      <div >
        <img src="images/card5.jpg" alt=""  height="350px" width="220px">
        <button > Add To Cart </button>
      </div>
      <div >
        <span >$89</span><span >$149</span>
        <h2 >Nike</h2>
        <p >Running Shoes</p>

      </div>
    </div>
  </div>

CodePudding user response：

Remove padding from:

    .product-container
 {
  padding-right:10vw; <--- Remove this padding.
  display: inline-block;
  overflow-x: auto;
  scroll-behavior: smooth; 
  }

then apply css in .products

.products {
display: flex;
justify-content: center;
align-items: center;
column-gap: 10vw;
 }