Blog Page Custom CSS Working In Back-end But Not Live Site

Site URL: https://www.studioaem.com.au/blog

See screenshot of backend and live site;
Screen Shot 2021-05-13 at 9.00.24 pm.png
Screen Shot 2021-05-13 at 9.00.34 pm.png

Custom CSS I've added:

//BLOG STYLES
//Blog List Page

.BlogList-item-image {
background-color: #b1b1b9 !important;
margin-bottom:0px !important;
}

.BlogList-item-title {
background-color: #b1b1b9 !important;
padding-top: 20px !important;
padding-bottom: 20px !important;
margin-bottom: 25px !important;
padding-left: 20px !important;
padding-right: 20px !important;
color: #ffffff !important;
font-style: italic !important;
font-family: 'baskerville-display-pt' !important;
}

.Blog-meta {
color: #b1b1b9 !important;
}

Seems the CSS is present in the page using view source but not being pulled to the page. Very confused...

Hi. I see the CSS worked here. Did you solve the problem?

On 5/18/2021 at 12:55 PM, tuanphan said:

Hi. I see the CSS worked here. Did you solve the problem?

No... The Styling should have the grey boxes but it doesn't on the live site.

Try this new code

/* blog background */
.BlogList-item-image, .BlogList-item-title {
    background: #b1b1b9 !important;
    margin-top: 0 !important;
    margin-bottom: 0;
}
a.BlogList-item-title {
    padding: 20px 25px !important;
    color: #fff;
    margin-bottom: 25px !important;
    font-family: "baskerville-display-pt" !important;
}

That works! 

Thanks so much @tuanphan