Styling multiple blocks

Site URL: https://www.ajollyconsulting.co.uk/risk-consulting

I've added a drop shadow to an image which worked great: https://www.ajollyconsulting.co.uk/visa-global-acquirer-risk-standard

I wanted to add to other images on the site (but not all), but when I added the other block to the CSS it started behaving oddly by adding a white margin to the left of the second block.

The page with the second block that won't play ball is: https://www.ajollyconsulting.co.uk/risk-consulting (CSS since removed as it's live)

I used:

#block-cb70d638ae2ff944299b, #block-yui_3_17_2_1_1619789644452_40023 .image-block-outer-wrapper { 
box-shadow: -10px 10px @ajcteal !important;}

and also tried:

#block-cb70d638ae2ff944299b, #block-yui_3_17_2_1_1619789644452_40023 {.image-block-outer-wrapper { 
box-shadow: -10px 10px @ajcteal !important;}}

I also tried repeating the CSS and having them both separate but nothing worked.  I've since discovered that, even if I delete the CSS for the first - working - one, this second one still displays oddly. So am now realising it wasn't me not getting the code right when adding multiple blocks, but something specific to that second block. 

I can see when inspecting the page that there is a margin applied:

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic {

margin: auto;}

BUT I can't seem to target it away!
 

Use this code

/* risk consulting shadow */
div#block-yui_3_17_2_1_1619789644452_40023 .image-block-outer-wrapper {
    box-shadow: -10px 10px #06b9ca !important;
}
div#block-yui_3_17_2_1_1619789644452_40023 figure {
    max-width: 100% !important;
}

and some other problems, do you want to fix these?

Site URL – https://www.ajollyconsulting.co.uk/

1. (Tablet-Homepage) Reduce white space under header?

2. (Tablet-Overlay Menu) I see 2 items have orange color. Want to fix this?

3. (Mobile-Footer) Move newsletter to bottom of footer?

4. (Tablet-Partnerships) Increase banner text width?