Basically I want the box that has all the content (in a div called #container) to fit the width of the iphone and for the image to fit the width too. If you take the browser and make it thin (width-wise) you'll see how the page is responsive in that case.... but this doesn't translate onto the iphone for some reason.

Its not working on your iPhone because its screen dimensions are 320 x 480. And in your media query you are not handling it. Whenever the viewport size goes less than 600px or 500px, you can remove the float from the image and give it a 100% width or make it a block element, so that it takes the entire row. Even the font-size can be reduced for a smaller device. For eg;

<style>
/*Because you already have defined media query for min width of 400px*/

 @media screen and (max-width:399px){

/*Reduce the margins for smaller screen devices*/
#container{
  margin: 8px auto;
  font-size:12px;
}

#content{
  padding:10px;
}

#content img {
    display: block;
    height: 183px;
    margin: 7px auto;
    float:none;
    width: 60%;
}

/*Making the textboxes take the full width*/
form input{
   display:block;
}
}
</style>

Try this out and let me know.

Oh, I meant about this part:

container{

margin: 8px auto; width:60%; font-size:18px; }