CSS Changes not working after site move

Hi guys, I am in the process of upgrading my site and again building round easyblog. I have used a template from joomshapre which is the default Helix Ultimate.
Following your instructions in the help area I'veported across my blog so those instructions are great. On my previous site we applied some custom CSS because the images were getting a box around them in the blog - see example: http://www.manycaps.com/_helix/mango.html

this is the customer CSS that you gave me to put into the CSS of easyblog, what am I missing?


body #eb .eb-mag-blog-image {
background-size: contain !important;
background-position: center !important;
}
body #eb .eb-mag .eb-mag-grids > div {
flex: 0 50% !important;
}
#eb .eb-mag .eb-mag-body {
text-align: justify !important;
}
body #eb.mod-easyblogshowcase-magazine .eb-gallery-cover__img {
background-size: contain !important;
background-position: center !important;
background-color: #ffffff; !important;
}
#eb .eb-blog-grid-image {
background-size: contain; !important;

}
.sprocket-tabs-panel.active #eb .ebd-block:before, #eb .ebd-block:after {
display: none;!important;
}

/* this css override Easyblog reading progress bar styling */
#region3.xtc-wrapper.anistyle {
-webkit-animation-name: inherit !important;
animation-name: inherit !important;
}

/* The following 2 css selectors temporarily addresses a styling issue with EasyBlog's grid view in mobile */
#eb.is-mobile .eb-blog-grid-showcase-content {
background-color: unset;
position: absolute;
}

#eb.is-mobile .eb-blog-grid .eb-blog-grid-showcase-cover__img {
height: 400px;
}