Main Navigation Dropdown menu_Colour Problem

I am struggling to solve the following:

I used the following code to customise the 'About' dropdown navigation on the topnav:

a.header-nav-folder-title:hover + div, .header-nav-folder-content {
    text-align: center !important;
    position: absolute;
    left: 50% !important;
    right: unset !important;
    -webkit-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
  background: #00000 !important;

When I view the drop down while in editor it displays correctly: (see image below)

But when viewed on live site the styling is wrong: (see screenshot below)

Please help, I'm a rookie coder, and this is tripping me up.

Thank you