How to align div inside page content in jQuery-Mobile?

How to align div inside page content in jQuery-Mobile?

I have a div inside jQuery-Mobile page div like this:
http://jsfiddle.net/UFOcode/gtXzb/1/
<div data-role="page" data-pagination="1">
<div data-role="content">
<div class="iBorder">
</div>
</div>
</div>
I want to align class iBorder at left side and expand its size to screen
frame. I don't know why always have small gap on left and right
This is some trying CSS
.iBorder{
height: 300px;
width: auto;
margin: 0;
background-color: brown;
top: 0;
left: 0;
}
and this is screen shot

Please help to to justify iBorder div and expand its size. Thanks!