0

I have a link that is being applied to the logo in my sites header https://dev.theartofsongs.com/about. The problem i'm having is that the link has padding to the right of it that's pushing the logo off centre.

I've changed the padding in the CSS and although I can see that the style has been applied in the developer tools, it's ignoring the value I've put in the CSS.

CSS File

    #masthead .custom-logo-link {
        padding-right: 0em;
    }

Rendered HTML

    #masthead .custom-logo-link {
        padding-right: 2em;
    }

I don't understand why if it's applying the style it's ignoring the padding value

Edit: Just to update people on why this code wasn't working in case anyone else has this feature on their server.

The code I had put in my CSS file was actually correct. I came back and refreshed the page, several hours after i'd uploaded my code via ftp. Suddenly my code was working, even after I'd previously emptied my browser cache (I had cache turned off in developer tools anyway).

I couldn't work out why this was happening but this morning realised my server had a SuperCacher feature turned on. Essentially the server wasn't using the uploaded file but file previously cached. I've turned off the feature for my development site now and haven't had anymore problems.

If anyone is having a similar problems check you don't have a similar feature on your server.

alierrett
  • 1
  • 1
  • 1
    Make sure there isn't any other CSS file or class that is overriding this. Also, make sure your browser is not caching some old version of your CSS. Or, a possible workaround could be to add `!important` next to `padding-right: 0em`. – Anis R. May 03 '19 at 18:18
  • It's because your CSS selector is less specific than what's already applied. I looked at your code you have `.custom-logo-link` as the only selector and `#masthead .site-header .custom-logo-link` is what's being applied. Change your selector to the more specific selectors and you'll have better luck. – disinfor May 03 '19 at 18:18

2 Answers2

0

It is because #masthead .site-branding .custom-logo-link has more specificity than the selector you have used in your css file. Try to use important

 #masthead .custom-logo-link {
    padding-right: 0em !important;
}

or use this way.

#masthead .site-branding .custom-logo-link {
 padding-right: 0em;
}
Santosh
  • 3,477
  • 5
  • 37
  • 75
0

Because your another style has a higher specificity.

#masthead .site-branding .custom-logo-link {
    padding: 1em 0em;
}

You can change the specificity with !important

#masthead .custom-logo-link {
    padding-right: 2em !important;
}

For the calculation of specificity, you can see the Specificity Document

Dai Jie
  • 23
  • 4