Responsive flexible images not working

I'm trying to make my website responsive. I found on this website (http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/) that to be able to make images flexible, you have to use max-width: 100%.

Which I did on my website (http://riksblog.com/Marnik/index.html) for #promo1img (the first iphone image) but as you can see, it's not working as it should.

Which css-styles am I missing?

Change your section.first class to below: (line 110, in stijl css file):

  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: auto;
  color: white;
  text-align: center;
  background-image: url(../img/header.jpg);
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;

The above code fixes the background cover image.

Now there are other elements in the html that are not responsive. So for those, add this codes to your css:

@media screen and (max-width: 480px){
    #contactemailp{
        margin-left:0px;
    }
    section.first .section-content .section-content-inner h1 {
        font-size: 40px;
    }
}