如何防止文本扩展到我的DIV？

Question

我有一个带有表单的DIV，当我缩放网站时，文本和表单框将缩放并溢出框。我试图发布图片，但我的声誉不够高。

CSS：

html { 
    background: url(IMG_9506.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
}

#box{
    float:left;
    height:66%;
    width:65%;
    margin-top:-5%;
    padding:0;
}

#box3{
    background-color:#ffc341;
    float:left;
    max-height:66%;
    max-width:33%;
    margin-top:2%;
    padding:0;
    border:solid #ffed65 2px;
    overflow:hidden;
    position:absolute;
    display:inline-block;   
}

.modal-footer {
    width:50%;
    background-color:white;
    text-align:center; 
    margin:auto;
    border: 2px outset;
    clear: both;
}

.input-xlarge{
    position:relative; 
    white-space : normal;
    border:2px inset;
    display:block; 
    margin:auto; 
    padding:15; 
    font-size:24; 
    padding-bottom:4px;
}

.input-large{
    font-size:24;
    padding:15;
}

h3{
    text-align:center;
    text-decoration:none;
}

#signup{
    text-decoration:none;
    font-size:xx-large;
    font-family:Arial;
}

HTML：

<div id="box">
<img src="dalogo.png" width="100%" height="auto">
<p id="claim1">
</p>
</div>

<div id="wrapper">
<div id="box3">
<form class="nm" action="index_submit" method="post">
<div class="modal-body">
<br>
<input class="input-xlarge" type="text" required placeholder="First Name" name="name" />
    <br>
    <input class="input-xlarge" type="text" required placeholder="Last Name" name="lastname" />
<br>
<input class="input-xlarge" type="text" required placeholder="Email" name="email" />
    <br>
<input class="input-xlarge" type="password" required placeholder="Password"name="pass" />
<br>
<br>
    <input class="input-large" type="file" required placeholder="File" name="file"/>
    </div>
    <br>
    <div class="modal-footer">
    <br>
    <a href="#" class="btn" id="signup">  Sign Up  </a>
<br>
    <br>
    </div>
    </form>
    </div>
 </div>