Estoy realizando una pagina web en la cual se ha incluido una sección de listas, las cuales deben mostrar al usuario listas de dos en dos, es decir dos que los divs que contiene a las listas se muestren de dos en dos y centradas.
El problema que tengo es que los divs de las listas tienen un width: 400px; y deben verse centradas de acuerdo a cada pantalla posible, menos para dispositivos móviles como teléfonos celulares.
La clase css que contiene los estilos de los divs de las listas es la siguiente
.contenedor_listas_recetas{
width: 400px;
margin: 25px;
box-shadow: 0px 0px 6px 0px rgba(184,184,184,1);
border-radius: 10px;
height: 178px;
background-size: 100%;
background-repeat: no-repeat;
background-position: top;
float: left;
}
EL div padre que contiene al div contenedor_listas_recetas tiene un width de 100%
esta es la plantilla
<div class="contenido">
<div *ngIf="vista_principal===4" class="listas_Recetas">
<div class="header_listas">
<div (click)="atrasRecetas2()" style="width: 10%;
float: left;">
<img src="/assets/img/icons-26.svg" style="width: 100%; ">
</div>
<div class="col" id="misl" style=" width: 90%;
float: right;
margin-top: 20px;">{{lista_recetasin.name}}
</div>
</div>
<div class="contenedor_listas_recetas" *ngFor="let item of lista_recetasin.ads"[ngStyle]="{'background-image': 'url('+ item.picture_for_mobile+')'}" style="height: 190px;"
(click)="ConsultarReceta(item)">
<div style="overflow:auto; height:190px;">
<div class="footer_listas" style="margin-top: 150px;">
<div class="derechas_listas" style="width: 75%;">
<div class="titulos_l" style="color: #666;">
{{item.name}}
</div>
<div class="subtitulos_l">
{{lista_recetasin.name}}
</div>
</div>
<div class="izquierda_listas" style= "background: #fff;width: 25%;text-align: center;padding-top: 10px;">
<span *ngIf="item.recipe_items_number>1">{{item.recipe_items_number}} items</span>
<span *ngIf="item.recipe_items_number===1">{{item.recipe_items_number}} item</span>
</div>
</div>
</div>
</div>
<div class="footer_listas2">
</div>
</div>
</div>
Sin embargo me han pedido que el cambio lo realice unicamente en el archivo css sin cambiar la propiedad width: 400px de la clase contenedor_listas_recetas
Así esta la vista actual de mis divs
Saben como puedo hacer para que se centren sin importar el tamaño de un pantalla, excepto en teléfonos móviles.
Gracias