Webpage's width is setting to 980px instead of the width of the window. Mobile site

Question

I've been working on a webpage for the last few weeks and I have the desktop version complete. Currently I'm working on a stylesheet for the mobile site. But I've run into a problem where the content div will not size to the width of the screen. I've checked all width tags and max width tags all are set to 100% instead of an exact screen size. I've also used js to get the window size and on my test device it's 540px; but the div tag is sizing to 980px. I have a reset css stylesheet included and I made sure it doesn't affect the size as well. I've noticed using position:fixed makes it the right size but then it doesn't scroll. here's the style sheet. and html. Sorry if my code is poor. I'm an application programmer by trade, not a web designer. Any constructive criticism would be appreciated as well. http://jsfiddle.net/justinclev/ma63f3vo/

   html, body { height:100%; width:100%;}
   body {
    background-color:#131720;
    font-family: 'helvetica';
    text-align:justify;
    text-justify:inter-word;
   }

   .Header {
    z-index:95;
    position:relative;
    width:100%;
    height: 35px;
    background-color: #039de3;
    /*
    background: #5078CC; /* Old browsers 
    background: -moz-linear-gradient(top,  #D93F3F 0%, #FF4040 90%, #4C2020 100%); /* FF3.6+ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D93F3F), color-stop(90%,#FF4040), color-stop(100%,#4C2020)); /* Chrome,Safari4+ 
    background: -webkit-linear-gradient(top,  #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* Chrome10+,Safari5.1+ 
    background: -o-linear-gradient(top,  #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* Opera 11.10+ 
    background: -ms-linear-gradient(top,  #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* IE10+ 
    background: linear-gradient(to bottom,  #D93F3F 0%,#FF4040 90%,#4C2020 100%); /* W3C 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D93F3F',    endColorstr='#4C2020',GradientType=0 ); /* IE6-9 */

   }
   .Header .Title {
    float:left;
    width:auto;
    margin-left:1%;;
    position: absolute;
    bottom:5px;
    font-size: 20px;
    color: white;
   }

   .Container {
    position:fixed;
    height:auto;
    margin-top:65px;
    margin-bottom:70px;
   }
   .Content {
    overflow:auto;
    min-height: 100%;
    background-color:white;
    box-shadow: 15px 0 21px -10px black, -15px 0 21px -10px black;
   }

   .linkButton { 
    font-family: 'Roboto', cursive;
    background: none;
    border: none;
    font-size: 16px;
    color: #ED5555;

    text-decoration: none;
    cursor: pointer; 
   }

   .HomePageText {
    margin:1%;
    width:60%;
    float:left;
    font-size:8px;
   }

   /*
    * 
    *
    * Header
    * 
    */
   .heading {
    font-family: 'Roboto', sans-serif;
    width: 100%; /* Spans the width of the page */
    height: 60px;
    z-index:98;

    position: fixed;
    top: 0px;


    background-color:#131720;
   /*
    background: #5078CC; /* Old browsers *
    background: -moz-linear-gradient(top,  #063497 0%, #5078CC 90%, #022162 100%); /* FF3.6+ *
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#063497), color-stop(90%,#5078CC), color-stop(100%,#022162)); /* Chrome,Safari4+ *
    background: -webkit-linear-gradient(top,  #063497 0%,#5078CC 90%,#022162 100%); /* Chrome10+,Safari5.1+ *
    background: -o-linear-gradient(top,  #063497 0%,#5078CC 90%,#022162 100%); /* Opera 11.10+ *
    background: -ms-linear-gradient(top,  #063497 0%,#5078CC 90%,#022162 100%); /* IE10+ *
    background: linear-gradient(to bottom,  #063497 0%,#5078CC 90%,#022162 100%); /* W3C /
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063497', endColorstr='#022162',GradientType=0 ); /* IE6-9 */
   }
   .BlueBarHeader {
    font-family: 'Roboto', sans-serif;
    width: 100%; /* Spans the width of the page */
    height: 40px;
    z-index:98;

    position: fixed;
    top:25px;

    -webkit-box-shadow: 0px 7px 10px 1px rgba(19,23,32, 0.95);
    -moz-box-shadow: 0px 7px 10px 1px rgba(19,23,32,0.95);
    box-shadow: 0px 7px 10px 1px rgba(19,23,32,0.95);
    background-color:#006694;

    background: #006694; /* Old browsers */
   }

   .Logo {
    font-size: 24px;
    color: white;
    position: absolute; 
    bottom: 10px; 
    left: 5px;
   }

   /*Login Style info */
   .Login{
    position: absolute; 
    top: 0px;
    right:0; 
    height:25px;

    padding-top:5px;
    padding-left: 10px;
    padding-right:5px;

    color: white;
    font-size: 15px;
   }

   .Login a {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: white;

    text-decoration: none;
   }

   .Login a:hover {
    text-decoration:underline;
    color: white;
   }

   #LoginLink {
    display: inline-block;
   }
/*
 * Footer
 * 
 */

footer{
    position:relative;
    display:block;
    z-index: 99;
    width: 100%;
    height:50px;
    bottom: 0px;
    right:0;
    padding-top:0px;

    color:white;

    background-color:#131720;

    /*background: #FF4040; /* Old browsers *
    background: -moz-linear-gradient(top,  #063497 0%, #5078CC 90%, #063497 100%); /* FF3.6+ *
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#063497), color-stop(90%,#5078CC), color-stop(100%,#063497)); /* Chrome,Safari4+ *
    background: -webkit-linear-gradient(top,  #063497 0%,#5078CC 90%,#063497 100%); /* Chrome10+,Safari5.1+ *
    background: -o-linear-gradient(top,  #063497 0%,#5078CC 90%,#063497 100%); /* Opera 11.10+ *
    background: -ms-linear-gradient(top,  #063497 0%,#5078CC 90%,#063497 100%); /* IE10+ *
    background: linear-gradient(to bottom,  #063497 0%,#5078CC 90%,#063497 100%); /* W3C /
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#063497', endColorstr='#063497',GradientType=0 ); /* IE6-9 */
}

.footer{
    display:block;
    z-index: 99;
    width: 100%;
    height:35px;
    bottom: 20px;
    right:0;
    padding-top:10px;

    font-family: 'Roboto', sans-serif;
    text-align:center;
    font-size:20px;
    color:white;

    background-color:#006694;
}

footer a{
    text-decoration:none;
    font-style:italic;
    color:white;
}
footer a:hover {
    text-decoration:underline;
}

Webpage

<?php
include_once '/includes/db_connect.php';
include_once '/includes/functions.php';

sec_session_start();

if (login_check($mysqli) == true) {
    $logged = 'in';
} else {
    $logged = 'out';
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Imagine That</title>
        <?php
        include_once '/includes/includes.php';
        ?></head>
    <body>

        <div class="Content">
            <div class="Container">
                <div class="Header">
                    <div class="Title">Welcome to the Imagine That website!</div>
                </div>
                <div class="HomePageText">
                    This site is dedicated to furthering my knowledge of coding as well as web design. If you take a look around which I hope you will. 
                    You will notice that I have quite a bit of features in this site that aren't necessary and some that may just seem obsurd for a digital Portfolio. 
                    Well before you leave thinking I've gone mad and don't know what I'm doing. Allow me to explain the method to my madness, because trust me there is one. 
                    This site has two purposes. The first is to be a digital portfolio displaying my knowledge of code and different projects I have created. 
                    The second is to be a playground for my imagination to come up with new and cool things. To keep it simple this is a digital porfolio displaying all the things that I have learned about web design and coding.
                    Some of these features can only be accessed by creating a account, Now I know what your thinking. Why should I create a account to such a small website for one guy that serves no purpose for me. Well, To be frank this site does serve a purpose to not only I, but also the new developer looking for source code on odd projects. The projects I post on here will include either their full source code or small fragments for the complicated parts of the program. I will go over  a bit of it to teach beginners how to create and do the things I have created already. 
                    So again bare with me and create an account. It's easy and won't take you much time. After that feel free to look around and explore my creation.
                </div>
                <div style="width:37%; height:100%; float:right;">
                    <img style="width:95%; height:auto;margin:0 auto; margin-top: 15px;" src="Photos/307470_2505425680003_1303200128_n.jpg" />
                </div>
            </div>                  
        </div>

        <?php
        include_once 'Footer.php';
        ?>
    </body>
</html>

Answer 1

Add this to your HTML page's head

    <meta name="viewport" content="width=device-width, initial-scale=1.0">