I am trying to make my site fluid, adaptive or even like the changeling on deep space 9.

I am using this css code for @media

Code:
@media all and (max-width: 540px) and (min-width: 460px), (min-width: 1000px) {
  body { 
    max-width: 100%;
    margin: 0 auto;
    padding-bottom: 90px;  
}
#main-box {
    position: relative; left: 1%;
    position: relative; right: 1%;
}
}
The body section is this;

body {
max-width: 98%;
margin: 0 auto;
padding-bottom: 90px;
background-color: #c0c0c0;
}

the text with border element is this;

Code:
#main-back {
    background-color: #fffff0;
    padding-top:20px;
    padding-bottom: 40px;
}
#main-box {
    padding-bottom: 20px;
    background-color:#FFFFFF;
    position: relative; left: 15%;
    position: relative; right: 15%;
    position: relative; top: 30px;
    padding: 10px;
    border-color: #D5D6FF;
    border-style: outset;
    border-width: 4px;
    text-align: left;
    font-family: arial,san-serif;
    font-size: 1.00em;
    color: black;
  }

#main-box img.align-left { 
    float: left;
    }
#texted-1 {background-color:#FFFFFF;
           padding-left: 10px;
           padding-right: 10px;
           font-family: arial;
           font-size: 1.00em;
           color: black;
}
Can someone tell what to do to get the page to load at 98% with a 1% margin? At the moment it loads at around 30% and is aligned to the left. You can see what I mean in the attached file.

opera 7.jpg

fanks.