Comment utiliser la spécificité avec le CSS?

J'ai des boîtes que je veux aligner. Je ne peux pas vraiment modifier le HTML donc ma seule option est css. En utilisant:

<!-- Box Layout -->
<a class="event_listing post-6985 type-event_listing status-expired hentry" href="https://adsler.co.uk/event/new-cross-and-deptford-free-film-festival/">
    <div class="box-layout">
        <div class="event-img"><img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager-uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
        </div>
        <div class="boxes-view-box-registered-code"></div>
        <div class="event-title">
            New Cross and Deptford Free Film Festival
        </div>
        <div class="event-start-date">2019- 05-26</div>
        <div class="event-location">
            <i class="glyphicon glyphicon-map-marker"></i> London 
        </div>
        <div class="box-footer">
            <div class="event-ticket">#free</div>
        </div>
    </div>
</a>

fonctionne pour aligner les divs, au moins dans tous les aspects sauf la hauteur. Cependant, il affecte d'autres boîtes sur une autre page qui sont de toute façon dans un format différent.

J'ai donc essayé ce qui suit afin de spécifier et ainsi différencier.

<div class="line-layout" style="display: none;">
    <li class="event_listing post-6985 type-event_listing status-expired hentry" style="visibility: visible;" data-latitude="" data- longitude="">
        <div class="event-info-row-listing">
            <a href="https://adsler.co.uk/event/new-cross-and-deptford-free-film-festival/">
                <div class="row">
                    <div class="col-md-1">
                        <div class="organizer-logo">
                            <img alt="Deptford Film Festival" src="https://adsler.co.uk/wp-content/uploads/event-manager-uploads/event_banner/2019/05/2456d41f16399aed538d25b1cd32ad14.jpg">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="event-title">
                            <h4>New Cross and Deptford Free Film Festival</h4>
                            <div class="boxes-view-listing-registered-code">
                        </div>
                        <div class="event-organizer-name">
                            <normal>Deptford Film Festival
                                <normal></normal>
                            </normal>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="date" <date>2019-05- 26</date>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="event-location">
                        <i class="glyphicon glyphicon-map-marker"></I> London 
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="event ticket">#free</div>
                </div>
                <div class="col-md-3"></div>
            </div>
        </a>
    </div>
</li>

Et:

<style>
@media (min-width:768px) {.entry-content 
.event_listings{ display:flex; flex-wrap:wrap; }} @media 
(min-width: 768px){.entry-content .event_listings 
.event_listing{ width:20%; padding:0 20px; }} @media 
(min-width: 768px) {.entry-content .event_listings 
.event_listing .box-layout{ width:100%; float:none; 
height:100%; }} @media (min-width: 768px){.entry-content 
.event_listings .event_listing .box-layout{ display:flex; flex- 
direction:column; }} @media (min-width: 768px){.entry. 
content .event_listings .event_listing .box-layout .event. 
title{ flex-grow: 1; }}
</style>

N'a pas fonctionné.

Tout ce qui contient .entry-content semble affecter d'autres div, alors comment puis-je spécifier? En gros, je veux toutes les boîtes ici: https://adsler.co.uk/find-an -event / la même taille et hauteur avec 3 x 3 dans une grille.

J'ai également essayé d'omettre . entry-content en utilisant:

<style>
@media (min-width: 768px) {
    .entry-content a {
        width: 32%;
    }
}
</style>

J'ai aussi essayé:

#content .entry-summary img.wp-post-image, #content 
.entry-content img { 
height: 250px;
}

.box-layout { 
width: 100%
}

Cela alignait la hauteur mais les espaces entre les deux sont devenus plus étroits et il utilise entry-content alors j'ai foiré mes autres boîtes sur une autre page.

J'ai également essayé ceci dans mon header.php

@media (min-width: 768px){.event-img {
max-height: 190px;
overflow: hidden;
 }}

Je n'ai pas réalisé ce que je voulais.

C'est le plus proche que je connaisse.

@media (min-width: 768px){.box-layout.entry-content a {width: 32%;}}

Cela fonctionne dans mon header.php mais les cases sont 5 x 5 et six différents ...

Voici mon html:

@media (min-width: 768px){.box-layout >.entry-content a {width: 32%;}}

@media (min-width: 768px){.entry-content a {width: 32%;}}