Overriding Inline Style with CSS for WordPress Theme

First, the website – http://www.channeltraveldeal.co.uk/blog

Now – That’s out the way so lets go… Hi, I’m currently tinkering with a friends WP powered business page. Sadly, I’m not all that experienced with web design, I just know more than my friend and so I’m in need of some assistance if anyone is able to help.

I’m trying to make sure it’s viewed correctly across as many platforms as possible, the theme that has been used has responsiveness settings built in which has obviously helped with this, but unfortunately the header image isn’t playing ball and is too big (on tablet only).

I read that the best way to sort this out would be to add this to the CSS for the header image –

width: 100%;
height: auto;

… This is the confusing part (for me), I used Firebug to locate the HTML and CSS for the image and this is what I found –

HTML – <img width="1010" height="220" alt="Channel Travel Deal" src="http://channeltraveldeal.co.uk/blog/wp-content/uploads/2014/02/ctdlogotrue.jpg" class="preload-me">

CSS (from the right pane when the linked HTML is clicked on) – http://pastebin.com/6hyN7yTr

I assumed that the “preload.me” img class is the one I needed to amend. I googled for a bit and came up with a few different snippets to try but none of them worked. Here are the ones I tried.

.preload.me {
width: 100%;
height: auto;
}

preload.me {
width: 100%;
height: auto;
}

I tried those two variations with [style] added after the class name (with no space) and/or !important after the CSS values.

Nothing worked. Would someone let me know if I’m doing something wrong, or if there is something stopping me from overriding this inline style. Also, if my method is on completely the wrong track, if I can do it some other way.