css Max-Width won't resize image

Question

I'm creating a flexible grid website and I ran into a snag. It doesn't appear that the CSS property max-width:100%; is working on my logo image. It's supposed to resize along with the flexible grid, but it's not. Maybe I'm not calling the image correctly or my syntax is incorrect? The image is 200x67, and here's the relevant HTML:

<header>
<img src="images/so_200.png" alt="Website.com" id="logo" />
</header>

and here's the CSS for that:

header {
background-color:#ccc;
padding:1%;
}
img #logo {
display: block;
max-width:100%;
max-height:100%;
width: auto;
height: auto;
}

Any idea why it's not working? It shouldn't matter the image is a .png, right?

Answer 1

Remove space between img and #logo

img#logo {
    display: block;
    max-width:100%;
    max-height:100%;
    width: auto;
    height: auto;
}

Image file type(png) doesn't matter for css rules.

Answer 2

You have a space between the id and element:

img #logo => img#logo

img#logo {
  display: block;
  max-width:100%;
  max-height:100%;
  width: auto;
  height: auto;
}