I am trying to implement a form within a bootstrap popover but the alignment gets off? Help needed

I am trying to implement a form within a bootstrap popover but the
alignment gets off? Help needed

I am trying to implement a form within a bootstrap popover; but i cannot
seem to be able to align them both. The form elements move out side the
popover ; the solution should make the popover adjust according to the
size of the form elements. Please help.
HTML:
<br> <br> <br>
<div class="popover-markup"><a href="#" class="trigger">Popover link</a>
<div class="head hide"> Events </div>
<div class="content hide">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label"
for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail"
placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label"
for="inputPassword">Password</label>
<div class="controls">
<input type="password" id="inputPassword"
placeholder="Password">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn
pull-left">Sign in</button>
</div>
</div>
</form>
</div>
Javascript:
$('.popover-markup>.trigger').popover({
html : true,
title: function() {
return $(this).parent().find('.head').html();
},
content: function() {
return $(this).parent().find('.content').html();
}
});
here's the fiddle.
http://jsfiddle.net/MgcDU/6524/