Why does @media change body properties?

I really can't figure out why if I use:

@media screen and (max-width: 720px)

      

        
        
        
      

    

The body changes height and margin. Take a look at these samples:

1) Without @media: http://jsfiddle.net/Clear/xrcxsmpp/

2) Using @media: http://jsfiddle.net/Clear/xrcxsmpp/1/

As you can see, I also tried to change the body properties like:

body {
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

      

        
        
        
      

    

Anyone with an idea?