why is this css not working ? want to put to left

why is this css not working ? want to put to left

I am really stuck in this silly issue. i am spending 4 hours now only on
this problem.
I have a page: http://bibago.de/test.html. If you resize the page to 320px
width (iphone size), it should come to this state:
http://imagebin.org/267953
but what not working is that input field is not in the middle in iphone size.
this is my css:
.newsletter{
width: 300px;
padding-top: 40px;
padding-bottom: 40px;
clear: both;
}
html
<div class="newsletter">
<p class="overinput">zu bibago auf dem laufenden bleiben</p>
<div class="input-group newsletter1">
<input type="text" class="form-control" id="email"
placeholder="Hier Ihre E-Mail-Adresse eintragen..">
<span class="input-group-btn">
<button class="btn btn-default" style="background-color:
#156ac6;color: #ffffff" type="button"
onclick="senden()">Senden</button>
</span>
</div>
</div>
what is causing this? please help, i need to put that input field with its
title in center as shown in image.