Denzel Chia on "[Theme: EvoLve] How do I apply a shadow around the Header, Main content area and Footer?"

While most people appear to be getting rid of their box-shadow, I am trying to add one with great difficulty.

I am using the free version of Evolve

How can I add a shadow to the header, main content area and footer area? #wrapper in CSS.

I have tried adding the following CSS to the Custom CSS:
#wrapper {
box-shadow: 0px 0px 20px #000;
}
And using F12 Developers Tools-Microsoft Edge If I untick ‘box-shadow none !important; ‘ in:
#wrapper, .entry-content .thumbnail-post, #search-text, #search-text-top:focus, ul.nav-menu ul, ul.breadcrumbs, .entry-content .wp-caption, thead, thead th, thead td, .home .type-post.sticky, .home .formatted-post, .page-template-blog-page-php .type-post.sticky, .page-template-blog-page-php .formatted-post, .tab-holder .tabs li a, .tab-holder .news-list li, #wrapper::before, #bbpress-forums .bbp-search-form #bbp_search, .bbp-search-form #bbp_search, .bbp-topic-form input#bbp_topic_title, .bbp-topic-form input#bbp_topic_tags, .bbp-topic-form select#bbp_stick_topic_select, .bbp-topic-form select#bbp_topic_status_select, .bbp-reply-form input#bbp_topic_tags {
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
-box-shadow: none !important;
}
It works, I get the box shadow but adding this rule to Custom CSS, I cannot make it work, even changing ‘ -box-shadow: none !important; ‘ to ‘ box-shadow: !important; ‘ doesn't work.

Can anyone please advise on how to put a shadow around #wrapper.

The site is on my home server so cannot provide a link.