背景画像がはみ出てしまうのですが、横幅をマックスにする方法を教えていただけないでしょうか？

body {
/*  margin: 0 10px;
    padding: 0 0 50px;
    background: #F2F2F2;
    color: #222;
    line-height: 1;
    font-size: 20px;*/
}

.header, .footer, .section {
/*  display: block;
    width: 700px;
    margin: 0 auto;*/
}

.header, .footer {
    text-align: center;
}

.footer {
    margin-top: 1em;
}

h2 {
    margin: 1em auto 0.5em;
}

p {
    margin: 0.5em 0 0;
    line-height: 1.5;
}

p:first-child {
    margin-top: 0;
}

form {
    overflow: hidden;
}

input, label, select {
    vertical-align: middle;
}

input[type="radio"] + label {
    margin-right: 10px;
}

input[type="number"] {
    width: 5em;
    padding: 2px 5px;
    border: 1px solid #CCC;
    border-radius: 3px;
    font-size: 15px;
}

table {
    float: right;
    width: 320px;
    border-collapse: collapse;
    border-spacing: 0;
}

table:first-child {
    float: left;
}

th, td {
    height: 50px;
    border-bottom: 2px solid #CCC;
    text-align: left;
    vertical-align: middle;
    font-weight: normal;
}

.actions {
    padding: 0;
    overflow: hidden;
    vertical-align: middle;
}

.actions li {
    display: inline;
    list-style: none;
}

.box {
    min-height: 460px;
    margin: 0 auto;
    padding: 20px;
}

.box p {
    padding: 20px;
    background: rgba(255, 255, 255, .7);
    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#B2FFFFFF,endcolorstr=#B2FFFFFF,gradienttype=0);
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF,endColorstr=#B2FFFFFF)";
    zoom: 1;
    letter-spacing: 1px;
}

.box p + p {
    margin-top: 20px;
}

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/style2.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.bgswitcher.js"></script>
    <script>
    $("document").ready(function(){
      $(".box").bgswitcher({
        images: ["img/image1.gif","img/image2.gif","img/image3.gif"],
        effect: "drop"
      });
    });
    </script>
<body>  
    <div class="box">
      <p>xxxxxx</p>
    </div>
</body>
</html>