Problem with mobile CSS

See more:

CSS3

I am using this css to create a rounded container for my test site. It works well on a PC (it fills the correct width of the screen) but on a mobile phone, the screen displays a fixed width (about 1/3 of the total screen width). I have tried changing various of the css parameters but the mobile size remains the same! I have also checked tutorial sites for any clues, but to no avail. Can anyone suggest a way to resolve this?

The css I am using:

#RoundedContainer {
    max-width: 95%;
    width: 90%;
    margin: auto;
    margin-top: 10pt;
    font-family: Calibri;
    padding: 0.5em 1em 1em 1em;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background-color: #ababab;
    background: -webkit-gradient(linear, left top, left bottom, from(#909090), to(#a0a0a0));
    background: -moz-linear-gradient(top, #909090, #a0a0a0);
    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

TIA.

What I have tried:

I have tried changing various of the css parameters and have also checked tutorial sites for any clues.