Cannot Remove Padding - Works in Chrome Dev Tools but not when applied to site

[chules+ 4]

I'm working on a site at http://www.sportscare1.com and I'm trying to remove the padding in the heading area between the three sections.  The very top part of the menu is using the embed section for the social icons, under that is the line with the logon and the buttons and I'm using a container with an image and 2 button sections. The last is a megamenu section.

Using Chrome Dev tools I can decrease the padding by setting the second line of code below to having padding: 0; and this works using Chrome Dev tools but when adding to custom CSS It doesn't display.  I've tried .pl-sn-pad fix and also using the unique section id's as well.  Tried everything but I still can decrease the padding  that is way to much between the sections in the header.

Any assistance would be greatly appreciated

Thank you - chules

 

 

.pl-sn-pad {
    padding: 1rem;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: -ms-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    background-size: cover;
    background-position: 50% 50%;
    position: relative;
    z-index: 3;
}

 

[edgarcheverier+ 26]

Hi, are you sure you used  .pl-sn-pad.fix not pl-sn-pad fix?