How to make header image resize with responsive WP theme - html

Question

I am trying to use the Enigma theme on my WP site.
It allows you to add a logo about 200px wide which works with the responsiveness of the site.
However, I want to upload a much wider image, which then resizes as the screen gets smaller.
I added a class to the image file and tried to target it with css
max-width: 100%;
height: auto;
I am familiar with media queries but nothing I do is working.
Here is the theme, this is an example site, not the real site I am working on but it presents the same problem.
http://bestgirlsonearth.com
I've erased my work on it just to show the theme as is.

Answer 1

Due to fluid-system-column of bootstrap your image is located in a 6col "col-md-6" and by definition that class can't take more space or less than her parents middle weight (here row)
I'm not a user of Twitter Bootstrap but i think you should change in your header.php to have two rows and your full-sized img :
<div class="row ">
<div class="col-md-6 col-sm-12">
<div class="logo">
<a href="http://bestgirlsonearth.com/" title="Best Girls on Earth" rel="home">
<img src="http://bestgirlsonearth.com/wp-content/uploads/2014/10/bgeheader3.png" style="height:182px; width:1023px;">
</a>
<p>The finest women on the planet</p>
</div>
</div>
<div class="col-md-6 col-sm-12">
<ul class="head-contact-info">
//you contact info
</ul>
</div>
</div>
by this :
<div class="row ">
<div class="col-md-12 col-sm-12">
<div class="logo">
<a href="http://bestgirlsonearth.com/" title="Best Girls on Earth" rel="home">
<img src="http://bestgirlsonearth.com/wp-content/uploads/2014/10/bgeheader3.png" style="/* height:182px; */ /* width:1023px; */"></a>
<p>The finest women on the planet</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<ul class="head-contact-info">
// Your contact infos
</ul>
</div>
</div>
cheers,