How can i keep my image from enlarging the width of my page?

Question

When my website breaks at 800 pixels, my photo on this page moves above the text which is correct, but it also scales up to the width of my site, which is bad. How can I make it stop scaling up. I want it to always be the same size, about 392 pixels wide. I tried the code below, but it doesn't seem to work.

img { max-width: 392px !important; height: auto!important;}

now its doing this, locking the footer to the bottom. Ugh.

Answer 1

Option A

If you want it to always be the same size, change your css to this:

img {
    width: 392px;
}

Here's a fiddle with both your original code and my answer. http://jsfiddle.net/DrydenLong/Rs5F5/

UPDATE

Option B

Since you cannot edit the existing CSS, add the following code, but make sure it is loaded after the existing CSS.

img {
    max-width: 392px;
}

Option C

Or, if you have access to the HTML I would recommend using inline styles to do this. Something like below would also work.

<img src="..." style="max-width: 392px;">