Stop my image resizing with max-width: 100%

Question

I'm using a three-column Skeleton layout for my website. All works how I want it apart from one thing. I have an image aligned and above a table. See below:

http://www.cosworth-europe.co.uk/catalogue/pistonringsets.html

If I add max-width:100%; to the image it slightly shrinks and moves it out of line with my table before I've even resized by browser. See here:

http://www.cosworth-europe.co.uk/catalogue/pistonringsets2.html

Is there a way I can keep the max-width, but so it doesn't resize at all until the screen size changes?

HTML

<div class="six columns">
    <img src="../images/catalogue/pistonringslarge.jpg">
    <p style="padding-top:10px;"></p>

    <table style="font-size:11px; width:380px; margin-left:20px;">
        <tbody>
            <tr>
                <td style="padding-right:5px; width:70px;">Product Code</td>
                <td style="background-color:#133D8D; color:white; padding-left:5px;">Description</td>
            </tr>

CSS

.container .six.columns {
    width: 340px;
}

Answer 1

as Mr Listed pointed out... my image was fine, it was in fact the table that had overgrown the div due to adding a 20px margin. I removed the margin and added max-width:100% to my table. all works great now.