Estoy intentado crear una sección de artículos de un e-commerce, el problema que tengo es que estoy utilizando las grid de bootstrap, quiero que aparezcan 6 artículos por linea en Desktop pero tengo un problema y es que les tengo un margin a los artículos para que se separen un poco y se vea bien y al hacer esto no se centra respecto al contenedor. alguien sabría como poder arreglar esto? Se que es el margin que hace que se rompa pero como podria solucionarlo y que se vea bien, tambien tengo un problema y esque lo tengo puesto que tablets se vean 3 y en moviles 2, sin embargo esto no sucede. este es el código:
<div class="row articles container mx-auto">
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 article">
<div class="article-img">
<img src="static/img/article-test.jpg" alt="">
</div>
<div class="article-info">
<h3 class="article-name">Conjunto Completo</h3>
<p class="description-article">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum, ea.</p>
<div class="article-info-bottom">
<h4 class="article-price">$2.40</h4>
<div class="icon-container">
<svg class="favorite-icon" xmlns="http://www.w3.org/2000/svg" width="26" height="26" fill="currentColor" class="bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
<!-- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-heart-fill" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
</svg> -->
</div>
</div>
</div>
</div>
</div>
css
.article{
margin: 20px 5px 20px 5px;
background-color: yellow;
}
Asi es como se ve, esta un poco mas a la izquierda
Necesito que quede asi centrada pero con los espacios entre si, y que sean 6 por linea