How to remove the background (white space) of a .png image in CSS?

Question

I've tried to remove the background of this ST logo long.png image for the navigation bar of a website. However, even when I set the background color to transparent, or remove it manually using Paint.net it still won't work. I want to use the image in the navigation bar and the white space appearing makes it look unappealing.

ul {
    background-color:#656161;
    margin: 0;
    padding: 0;
    overflow: hidden;
    }

li{
    float:right;
    }

li.logo{
    float:left;
    background-color: transparent;
    }

li a.logo {
    font-family:calibri light;
    display: block;
    font-size: 30px;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    padding-right:0px;
    position: relative;
    right: 680px;
    background-color:transparent; 
    border: 0px;
    }

li a {
    font-family:calibri light;
    display: block;
    font-size: 18px;
    padding: 14px 20px;
    color: white;
    text-decoration:none;
    }


li a:hover {
    background-color: #242424;
    }

.active {
    background-color:#E52121;
    }

<div class = "navigation">
    <ul>
        <li><a href="news.asp">News</a></li>
        <li><a href="about.asp">About Us</a></li>
        <li><a href="upcoming.asp">Upcoming Events</a></li>
        <li><a href="content.asp">Content</a></li>
        <li><a class = "logo" href = "home.asp">
            <img src = "ST logo long.png" 
            height = "47px" width = "47px"></a>
        </li>
    </ul>
</div>