Image appearing to the left of its containing div

I have a series of divs that each contain one image. The images are (ideally) going to be centered vertically and horizontally within the divs, but right now the left side of each image is showing up about 6 pixels to the left of the left-most boundary of the containing div. How can I get them to display properly?

.SmallImageContainer {
        float: left;
        width: 100%;
        min-height: 70px;
        margin-left: 0px;
        margin-top: 20px;
}

.SmallImageBox {
        float: left;
        height: 70px;
        width: 50px;
        background-color: pink;
        margin-right: 10px;
}

.SmallImageBox img {
        display: block;
        vertical-align: bottom;
        margin: auto;
        border: solid thin #787878;
        max-width: 90%;
}

    <div class="SmallImageContainer">
    <div class="SmallImageBox"><img id="sm001" src="http://ift.tt/1w0odsl"></div>
    <div class="SmallImageBox"><img id="sm002" src="http://ift.tt/1w0odsl"></div>
    <div class="SmallImageBox"><img id="sm003" src="http://ift.tt/1w0odsl"></div>
    <div class="SmallImageBox"><img id="sm004" src="http://ift.tt/1w0odsl"></div>
    <div class="SmallImageBox"><img id="sm005" src="http://ift.tt/1w0odsl"></div>
    </div> <!-- class="SmallImageContainer" -->