How do I keep the list item text from starting on top of the background image bullet?

Question

I need some help to figure out how to get the list item text to not start on top of the background image bullet. Here is my code:

ul.follow-background {
    list-style: none outside;
    margin: 0 0 0 0.6em;
    padding: 0 0 0 0.6em;
}

.follow {
    list-style: none outside !important;
    line-height: 30px;
    background: no-repeat left 7px; /** fixed vertical position **/
    margin: 0.3em 0 0 -0.6em;
    padding: 0 0 0 1.7em;
    overflow: hidden;
}

.follow.blacksquareicon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/black-square-16x16.png');
}

.follow.facebookicon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/facebook-icon-16x16.png')
}

.follow.flickricon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/fluid-flickr-logo-16x16.png');
}

.follow.linkedinicon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/in.jpg');
}

.follow.pinteresticon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/pinterest-logo-16x16.png');
}

.follow.rssicon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/rss.png');
}

.follow.twittericon {
    background-image: url('https://botanical-art.baeecorp.org/wp-content/uploads/twitter.gif');
}

Here is the HTML:

<ul class="follow-background">
    <li class="follow facebookicon"><a href="https://www.facebook.com/baeeorg" rel="nofollow">Facebook</a></li>
    <li class="follow flickricon"><a href="https://www.flickr.com/photos/baee/" rel="nofollow">Flickr Photo Albums</a></li>
    <li class="follow pinteresticon"><a href="https://www.pinterest.com/baee0196/" rel="nofollow">Pinterest</a></li>
    <li class="follow twittericon"><a href="https://twitter.com/BaeeArtists" rel="nofollow">Twitter</a></li>
    <li class="follow blacksquareicon"><a href="https://botanical-art.baeecorp.org/news/" rel="nofollow">News Announcements (subscribe to get our latest posts)</a></li>
</ul>

For how this works on my page, see "BAEE's Social Media Connections" section on https://botanical-art.baeecorp.org/about-us/#more-12

The code is based on the Answer from @Ori Drori to my question "How do I keep a background image bullet aligned with the first line of a wrapped list item?"

Answer 1

To do this, you were right to increase the padding-left value on .follow elements. However, this is an issue of specificity -- because another element on the site, .site-main ul li is getting a padding value, and .site-main ul li is more specific than .follow, the padding value is overriding your value for .follow.

To get around this, you could update the .follow selector to be more specific, i.e. .follow-background .follow.

Give this a try and let me know if it doesn't fix your problem, or if my explanation isn't clear. Thanks!