Media Queries not working on mobiles

Question

I use media queries in order to make my website "adaptive" - when I restore down my browser's window and cut it's size - everything works, but on mobile - the website appears incorrect, as a full desktop version, but with errors.

I'm thinking that the problem caused by this: When you enter my website you'll see that it can be scrolled to the right, when there is clearly no elements in that area (displayed or hidden), but I can't get rid of this scrollable space:/

Thanks in advance, sorry for such a messy question.

Here's the website: spalshmedia(dot)me

Here's the css:

body {
background-image: url("../images/background.jpg");
background-size: 20%;
background-repeat: repeat;
}

#page_wrap {
 width: 1000px;
 margin: 0 auto;
 position: center absolute;
}

.button {
-webkit-transition: all 0.2s linear;
 -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
      transition: all 0.2s linear;
}
.button:hover {
-webkit-filter: contrast(140%);
}
.websites {

border: 0.8px solid #666666;
}

#bg_first {
 position: relative;
 left: 0px;
 top: 100px;
 z-index: 1;
}
#bg_second {
 position: relative;
 left: 0px;
 top: 25px;
 z-index: 1;
}
 #header {
width: 1000px;
margin:0 auto;
text-align:left;
position: center absolute;
overflow: hidden;
}

#headerbg {
position: absolute;
margin-top: 100px;
z-index: 2;
}
#glass_upper_left {
position: absolute;
margin-left: -400px;
margin-top: -240px;
z-index: 2;
}
#logo {
position: absolute;
padding-left: 50px;
top: 100px;
z-index: 3;
}
#generic_ideas {
position: absolute;
margin: 200px 300px;
z-index: 3;
}
#welcome_page {
position: absolute;
width: 500px;
margin-left: 10%;
margin-top: -600px;
z-index: 10;
}
#about_page {
position: absolute;
width: 600px;
margin-left: 10%;
margin-top: -275px;
z-index:10;
}
#services_page {
position: absolute;
width: 400px;
margin-left: 10%;
margin-top: 100px;
z-index: 10;
}
#rates_text {
position: absolute;
margin-left: -25px;
 }
 #contact_page {
 position: absolute;
margin-left: 475px;
margin-top: 175px;
z-index: 10;
 }
  #contact_info {
  position: absolute;
width: 800px;
height: 500px;
  }
  #navigation {
  float: left;
  position: fixed;
top: 400px;
  left: 15px;   
z-index: 4;
  }
  #menu_bg {
  position: fixed;
width: 160px;
top: 370px;
left: 0px;
z-index: 3;
  }

  #footer_bg {
  position: absolute;
 margin-top: -100px;
 margin-left: 0px;
 z-index: 2;
  }
  #copyright {
  position: absolute;
 margin-top:-25px;
 margin-left: 30px;
 z-index: 10;
  }
 @media screen and (max-width: 1200px) {
 nav, #menu_bg {
 display:none;
 }
 #logo {
 position: absolute;
padding-left: 30%;
 }
 #generic_ideas {
 position: absolute;
margin: 200px 27%;
z-index: 3;
 }
 }
 @media screen and (max-width: 720px) {
 nav, #menu_bg {
 display: none;
 }
 #generic_ideas {
 position: absolute;
margin: 200px 70px;
z-index: 3;
 -webkit-transform: scale(1.5); /* Saf3.1+, Chrome */
 -moz-transform: scale(1.5); /* FF3.5+ */
  -ms-transform: scale(1.5); /* IE9 */
   -o-transform: scale(1.5); /* Opera 10.5+ */
      transform: scale(1.5);
         /* IE6–IE9 */
         filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}
 #bg_first {
 position: relative;
 margin-left: 0px;
 top: 100px;
 z-index: 1;
}
#bg_second {
 position: relative;
 margin-left: -200px;
 top: 25px;
 z-index: 1;
}
#logo {
position: absolute;
padding-left: 10%;
}
#generic_ideas {
position: absolute;
margin-top: 200px; 
margin-left: 5%;
z-index: 3;
}
#welcome_page {
position: absolute;
width: 400px;
margin-left: 10%;
margin-top: -650px;
z-index: 10;
}
#about_page {
position: absolute;
width: 450px;
margin-left: 10%;
margin-top: -375px;
z-index:10;
}
#services_page {
position: absolute;
width: 400px;
left: 10%;
top: 850px;
z-index: 10;
}
#web_design_title {
position: relative;
margin-left: 115px;
}
#rates_text {
position: absolute;
width: 400px;
margin-left: -10%;
margin-top: 190px;
}
#contact_page {
position: absolute;
margin-left: 475px;
margin-top: 175px;
z-index: 10;
 }
#contact_info {
 position: absolute;
width: 800px;
height: 500px;
margin-left: -500px;
margin-top: 240px;
}

}

Answer 1

I only see a media query that produces layout changes when the screen width is 720px and above, and one for 1200px and above. Looks like you need to add more media queries that target devices with smaller screens. Try this link for more information: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/