CSS viewport width

Okay, so at this moment I am busy learning responsive CSS. It might be simple for you, but I don't understand how to archieve this:

I am playing with making a 'grid'. I have set all the classes to percentages in width and height, so that should not be the problem. However, when I resize the viewport (window), it's not dynamically growing or shrinking.

See: here

Currently using the following html:

<meta name="viewport" content="width=device-width" /> 

<div id="wrapper">
<div id="header">
<a href="" title="FavoriteFM" class="top-logo-container"></a>
</div>
<div id="presenter">
<a href="" title="FavoriteFM" class="presenter-one"></a>
<a href="" title="FavoriteFM" class="presenter-two"></a>
<a href="" title="FavoriteFM" class="presenter-three"></a>
<a href="" title="FavoriteFM" class="presenter-four"></a>
<a href="" title="FavoriteFM" class="presenter-five"></a>

</div>

<div id="main">


</div>

Using the following CSS:

<style>

/* Theme  */
html {
margin-top: 0px !important;
}

/* DO NOT EDIT OR MONKEYS WILL BITE YOU */
.frame_holder {
position: absolute;
top: 8px;
bottom: 50px;
/* left: 50px; */
right: 150px;
background: #ffffff;
}

.my_frame {
width: 149%;
height: 108%;
/* border: 1px solid #e0e0e0; */
}

body {
    background-color: #f0ede9;
    margin-top: 0px;
    position: relative;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

}


.clearfix {
clear: both;
}

p {
font-family: Roboto;
padding: 1px;
}



#body.layout-1 {
background: #f0ede9 url(../images/border.gif) 640px top repeat-y scroll;
background-color: #f0ede9;
background-image: url(../images/border.gif), url(../images/border-2.gif);
background-repeat: repeat-y, repeat-y;
background-position: 640px top, 0px top;
}

a:hover, a:visited, a:link, a:active {
text-decoration: none;
color: #bababa;
font-family: Roboto;
}

#wrapper {
width: 965px;
margin: 0 auto;
overflow: hidden;
}

#header {
width: 100%;
height: 80px;
background: #2a2727;
margin-top: 20px;
color: #fff;
}

.top-logo-container {
  display: block;
  height: 100px;
  width: 100px;
  text-indent: -9999px;
  background: url(http://ift.tt/1NnJBMv) 5% 50% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100px;
}



#main {
margin-left: 2px;
overflow: hidden;
}

#presenter {
margin-top: 40px;
width: 100%;
height: 40%;
overflow: hidden;
}

.presenter-one {
  display: block;
  height: 100%;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
  }



    .presenter-two {
  float: left;
  position: relative;
  display: block;
  height: 50%;
  width: 25%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 266px 300px;
  }

    .presenter-three {
  position: relative;
  display: block;
  height: 50%;
  width: 25%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 266px 310px;
  }

      .presenter-four {
  position: relative;
  display: block;
  height: 52%;
  width: 25%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 266px 300px;
  }

      .presenter-five {
  position: relative;
  display: block;
  height: 52%;
  width: 25%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 266px 300px;
  }

  @media screen and (max-width: 965px) {
    body {
        width: 50%;
    }

    #main {
    width: 50%
    }


@media screen and (max-width: 365px) {
    body {
        width: 100%;
    }

    #wrapper {
    width: 100%
    margin: 0 auto;
}

#header {
width: 100%;
background: #2a2727;
color: #fff;
margin-top: 0px;
height: 100px;
}

.top-logo-container {
  display: block;
  height: 120px;
  width: 120px;
  text-indent: -9999px;
  background: url(http://ift.tt/1NnJBMv) 5% 50% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 120px;
}

#main {
margin-left: 2px;
}

#presenter {
margin-top: 40px;
width: 100%;
height: 100%;
}

.presenter-one {
  display: block;
  height: 100%;
  width: 100%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
}


.presenter-two {
  display: block;
  height: 50%;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
}

.presenter-three {
  position: relative;
  display: block;
  height: 50%;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
}

.presenter-four {
  position: relative;
  display: block;
  height: 50%;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%;
}

.presenter-five {
  position: relative;
  display: block;
  height: 50%!important;
  width: 50%;
  text-indent: -9999px;
  background: url(http://ift.tt/1BLvcsO) 0% 0% no-repeat scroll;
  margin: 0 auto;
  position: relative;
  float: left;
  background-color: #000;
  margin-top: -10px;
  background-size: 100% 100%
}




}