HTML / CSS - Spacing Error on Product Grid-CodePudding

I am working on a Flask project, but that is not too important. When I send over the result data with my rendered template I use the data and put it into a div with each product being contained in an tag.

HTML Code

        <div >
            {% for product in products %}
                <a  href="">
                    <p >{{ product[4] }}</p>
                    <p >Description: {{ product[5] }}</p>
                    <p >Price: {{ product[6] }}</p>
                </a>
            {% endfor %}
        </div>

However, with my current CSS my positioning is off and I have no idea why, I have it so that there is 50px margins on the outer product-grid container for default but then the spacing on the side of the rightmost product is different than that of the lefmost.

CSS Code

.products-grid {
  padding: 0px;
  margin-left: 50px;
  margin-right: 50px;
}

.product {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 300px;
  background: #ce8888;
  margin-bottom: 50px;
  text-align: center;
  margin-inline: 3%;
  padding: 5%;
}

.line {
  padding: 0px;
  margin-top: 0px;
}

Result of code:

CodePudding user response：

use display:flex for flexible items be the same length you can read here , and if you want keep 3 box per row carefully to set padding at .product

.products-grid {
  padding: 0px;
  margin-left: 50px;
  margin-right: 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.product {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 300px;
  background: #ce8888;
  margin-bottom: 50px;
  text-align: center;
  margin-inline: 3%;
  /*padding: 5%;*/
}

.line {
  padding: 0px;
  margin-top: 0px;
}

<body>
<div >
                <a  href="">
                    <p >Product</p>
                    <p >Description: </p>
                    <p >Price: </p>
                </a>
                
                  <a  href="">
                    <p >Product</p>
                    <p >Description: </p>
                    <p >Price: </p>
                </a>
                
                  <a  href="">
                    <p >Product</p>
                    <p >Description: </p>
                    <p >Price: </p>
                </a>
                
                  <a  href="">
                    <p >Product</p>
                    <p >Description: </p>
                    <p >Price: </p>
                </a>
                
                  <a  href="">
                    <p >Product</p>
                    <p >Description: </p>
                    <p >Price: </p>
                </a>
                
                  <a  href="">
                    <p >Product</p>
                    <p >Description: </p>
                    <p >Price: </p>
                </a>
        </div>
   </body>

CodePudding user response：

Solution without using flex. Add text-align: center to .products-grid css class.

.products-grid {
  padding: 0px;
  margin-left: 50px;
  margin-right: 50px;
  text-align: center;
}

.product {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 300px;
  background: #ce8888;
  margin-bottom: 50px;
  text-align: center;
  margin-inline: 3%;
  padding: 5%;
}

.line {
  padding: 0px;
  margin-top: 0px;
}

<div >
  <a  href="">
    <p >Product</p>
    <p >Description</p>
    <p >Price</p>
  </a>

  <a  href="">
    <p >Product</p>
    <p >Description</p>
    <p >Price</p>
  </a>

  <a  href="">
    <p >Product</p>
    <p >Description</p>
    <p >Price</p>
  </a>

  <a  href="">
    <p >Product</p>
    <p >Description</p>
    <p >Price</p>
  </a>

  <a  href="">
    <p >Product</p>
    <p >Description</p>
    <p >Price</p>
  </a>

  <a  href="">
    <p >Product</p>
    <p >Description</p>
    <p >Price</p>
  </a>
</div>