I am trying to center my text box within the div. I have searched and tried. I even tried centering the input box alone with a margin of 0 but had no such luck. Please help.

Here is the [JS Fiddle](http://jsfiddle.net/Jhb9q/) I made to aid with helping. Also there is a strange white space at the bottom. Please see the fiddle. Thanks a lot.

HTML:

```
<footer>
<div class="footerContainer">
<div class="footerLeft">
<h3>CONTACT US</h3>
<br />
<form name="contact" action="">
  <table cellpadding="10">
    <tr>
        <td>
            <label for="name" id="name_label"></label>
        </td>
        <td>
            <input type="text" name="name" id="name" size="50" value="" class="text-input" placeholder="Your Name"/>
            <label class="error" for="name" id="name_error"><br />This field is required.</label>
        </td>
     </tr>
     <tr>
        <td>
             <label for="email" id="email_label"></label>
        </td>
        <td>
             <input type="text" name="email" id="email" size="50" value="" class="text-input" placeholder="Your Email"/>
            <label class="error" for="email" id="email_error"><br />This field is required.</label>
        </td>
     </tr>

      <tr>
        <td>
            <label for="comment" id="comment_label"></label>
        </td>
        <td>
            <textarea name="comment" id="comment" rows="8" cols="50" placeholder="Your Message"/></textarea>
            <label class="error" for="comment" id="comment_error"><br />This field is required.</label>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
            <input type="submit" name="submit" class="button" id="submit_btn" value="Submit" />
         </td>
       </tr>
     </table>
</form>
</div>
<div class="footerRight">
<h3>CABRINI REPERTORY THEATRE</h3>
<sub>701 Fort Washington Avenue</sub>
<br />
<h3>Get Social</h3>
<br />
<span class="fa fa-facebook fa-3x"></span> <span class="fa fa-twitter fa-3x"></span> <span class="fa fa-vimeo-square fa-3x"></span> <span class="fa fa-instagram fa-3x"></span>
</div>
</div>
</footer>

```

CSS:

```
footer{
width: 100%; min-height: 375px;
background-color: #3772ab;
border-top: 3px solid #1f3e5f;
padding: 30px;
color: #FFF;
}
footer .footerContainer{
    width: 80%; height: 325px;
    margin: 0 auto;
    border: 3px solid #F00;
}
footer .footerLeft{
    width: 45%;
    padding: 0 10px 0 0;
    margin: 0 10px 0 0;
    float: left;
    display: inline-block;
    border: 3px solid #F00;
}
footer .footerRight{
    width: 45%;
    padding: 0 0 0 10px;
    margin: 0 0 0 10px;
    float: right;
    display: inline-block;
    border: 3px solid #F00;
}

@media screen and (max-width: 1225px) {

    footer{
        min-height: 500px;
        width: 100%;
        text-align:center;
        margin: 0 auto;
        border: 3px solid #F00;
    }

    footer .footerLeft{
    width: 100%;
    display: block;
    color: #fff;
    margin: 0 0 30px 0;
    padding: 0;
    border: 3px solid #F00;
    float: none;
}

footer input[type=text], footer textarea{
             display: block;
             margin : 0 auto;
             position:relative;
             border: 3px solid #F00;
        }

footer .footerRight{
    width: 100%;
    display: block;
    margin: 0;
    border: 3px solid #F00;
    float: none;
}

}
footer input[type=text], footer textarea{

    -webkit-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    -moz-box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    box-shadow: 
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1); 
    padding: 10px;
    background: #fff;
    margin: 0 0 10px 0;
}

```