Content Styling

overridding ui-content styles

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css">
<div data-role="page">
    <div data-role="header">
        <h1>Page One</h1>
    </div>
    <div data-role="content" data-theme="d" >
        <div class="ui-grid-a" >
            <div class="ui-block-a"><strong>Time:</strong></div>
            <div class="ui-block-b" id="price-order-timestamp">yyyy-mm-dd hh24:mi:ss</div>
        </div>

        <div style="width:100%;"> <!-- Here-->
            <div class="ui-grid-d" id="data-table-header" >
                <div class="ui-block-a">Label A</div>
                <div class="ui-block-b">Label B</div>
                <div class="ui-block-c">Label C</div>
                <div class="ui-block-d">Label D</div>
                <div class="ui-block-e">Label E</div>
            </div>
            <div class="ui-grid-d" id="data-table" >
                <div class="ui-block-a">A</div>
                <div class="ui-block-b">B</div>
                <div class="ui-block-c">C</div>
                <div class="ui-block-d">우삼겹(슬)_호주산_802401181763_1kg*PK</div>
                <div class="ui-block-e">E</div>
            </div>
        </div>
    </div>
</div>

CSS

.ui-content{
    padding-left:0;
    padding-right:0;
}