I'm having problems with responsive pages.

I'm clearly not understanding something.
I'm working on the small screen at the moment, screens up to 496 pixels.  I'm getting what I want, except the page has a right margin that I don't want.  My css sets everything to 100%, so I don't know where that margin is coming from.  You can see what is happening at enticedbynature.com, just make your browser as narrow as you can.  Is there some trick to this?  Do all the css files load, or just the one(s) for the page size that's loading?  Because I do have margins  for the larger screens.  Also, do I list the the css in order from smallest page to largest like this?
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:496px)" href="/Styles/MainSmall.css"> <link rel="stylesheet" type="text/css" media="only screen and (min-width:497px) and (max-width:709px)&quo ...