CSS won't override

so i'm adding a row of social media share buttons at the end of my blog posts, but the ul li code i've written won't override the default code.

here is the class i've written in the stylesheet:

* social media share links */

#socmed {
padding:0px 0px 50px 0px;
background:none;
}

#socmed ul {
background:none;
}

#socmed ul li a {
float:left;
margin:0px 0px 0px 0px;
background:none;
}


here is what i've written in the html for the posts:

<div id="socmed">
<ul>
<li><a href="http://www.facebook.com/sharer.php"<img src="*facebookimgurl*.png" alt="share on Facebook" height="25" width="25"></a></li>
</ul>
</div>


here's what it won't override in the stylesheet:

#content #colLeft ul li, #content #colLeft ol li {
padding:5px 0 5px 25px;
background:url(images/bullet_list.png) 0 8px no-repeat;
}


i can't get it to override the padding or the background image, however it's not showing the full background image, just a little sliver (screenshot attached). if i take the "a" out of the "#socmed ul li a {" line, it does show the whole image.

any ideas??

Look at which element(s) get a padding/background and which element(s) you’re trying to remove the padding/background from. Do you see any difference?

if i understand you correctly, yes there is a difference. normal lists in a blog post look the way they should, but my social media links at the bottom of the post are still wonky if i keep the "a" in that line code (first screenshot) . if i take the "a" out, the full image appears and lining up and spacing are all correct (second screenshot).

but i'm having fits trying to figure out how to get rid of the image and the spacing that it's pulling from the "#content #colLeft" div.

All you have to do is override the styles that are applied to the lis in
#content #colLeft ul li, #content #colLeft ol li {
padding:5px 0 5px 25px;
background:url(images/bullet_list.png) 0 8px no-repeat;
}

By writing something like:

#content #colLeft #socmed ul li {
margin:0;
background:none;
}

or:

#socmed ul li {
margin:0 !important;
background:none !important;
}

It has something to do with CSS specificity (that’s a nice search term ;)).

thanks for that. i ended up getting so frustrated that i stripped out the code that wouldn't override altogether, haha. but i'll put it back in with your suggested edits and see if that fixes things.