issues with WordPress CSS image off center

I have set up a store on Wordpress. In my store when images are imported for products they are not centered over the background. Using Chrome inspect the blue highlight below is where the image is. It's supposed to be over the black background.

This is the css for the images.

.st_th_item_image {
    width: 100%;
    overflow: hidden;       
    background-color: black;
    position: relative;
    z-index: 10;
    height: 385px; 
    transition: height 0.3s ease-out;
}

what's interesting is in Chrome inspect just before the <img> tags of the actual image is ::before, I can right click it and chrome gives a "Scroll into view" option. Clicking that puts the image where it needs to go, over the black background.

I don't see what's causing this. I'm pretty certain at this point its not the options/settings in Wordpress. It also isn't the size of the image that's the issue. It's a CSS issue. But I don't know what exactly.

UPDATE

I took the time to take out the code from Chrome inspect of a product and the matching css from the stylesheet.

.st_th_item_image {
    width: 100%;
    overflow: hidden;       
    background-color: black;
    position: relative;
    z-index: 10;
    height: 385px;
    clear:both 
    transition: height 0.3s ease-out;
}   
.item:hover .st_th_item_image  {
    height: 335px;
}
.st_th_item_image a {
    display: block;
    text-align: center;

}
.st_th_item_image i.icon_salelabel {
    position: absolute;
    top: 0;
    left: 0;
}
.st_th_item_image i.icon_hotlabel {
    position: absolute;
    top: 0;
    left: 0;
}
.st_th_item_image i.icon_newlabel {
    position: absolute;
    top: 0;
    left: 0;
}







<div class="st_th_item_image">
    <a href="http://example.com/product/link" class="woocommerce-LoopProduct-link">
        <div class="rating-input">
            <span class="glyphicon glyphicon-star-empty" data-value="1"></span>
            <span class="glyphicon glyphicon-star-empty" data-value="2"></span>
            <span class="glyphicon glyphicon-star-empty" data-value="3"></span>
            <span class="glyphicon glyphicon-star-empty" data-value="4"></span>
            <span class="glyphicon glyphicon-star-empty" data-value="5"></span>
            <input class="rating" data-max="5" value="" data-productid="668" data-min="1" name="rating" type="hidden">
        </div>
    </a>
    <a href="http://example.com/product/link">
        <img width="270" height="203" src="http://example.com/image.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" title="title" srcset="http://example.com/image.jpg 270w, http://example.com/image.jpg 300w, http://example.com/image.jpg 500w" sizes="(max-width: 270px) 100vw, 270px">
    </a>
</div>