CSS, Responsive Design, Image not resizing - html

Question

I have a header image that stopped resizing after I placed it in a CSS wrapper. I specified the width of the wrapper, b/c I want the navigation to the right to be directly above the white space area below - flushed to the right.
How can I set the width of the wrapper in which I place an image but maintain the responsiveness (image responds to resizing)?
HERE's the URL; http://www.insidemarketblog.com/
Here's the code:
HTML
<div id="header">
<div class="wrap">
<span class="menu_control">≡ Menu</span>
<ul class="nav"><li class="page_item page-item-35">ABOUT US</li></ul>
<h1 id="site_title"><a href="http://www.insidemarketblog.com"><img id="thesis_logo_image" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/logo_header1.png" alt="Inside Market Strategy" width="400" height="87" title="click to go home" />
</a></h1>
</div>
</div>
CSS:
.wrap {
width: 1000px;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}

Answer 1

You need to make the image flex too:
img {
display: block;
width: 100%;
height: auto;
}

Answer 2

I believe you have two issues here:
1st, Your .wrap is 1000px in width. please make it 100%
2nd, your img css should have a max-width: 400px; and width:100%
This way you will have your img exactly the way you want it.
Here is the css:
.wrap {
width: 100%;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
img {
width: 100%;
max-width: 400px;
height: auto;
}
See it in Action: http://jsfiddle.net/salota8550/59LKP/