can't get page-content full width 100%
Just like the topic says...I've searched and searched and can't figure out how. I have have a ui-grid and setting it to width 100% stretches it all the way to the right BUT there is still a margin on the left and I can't get rid of it! I tried setting inline css to margin: 0 and margin: 0 auto; and nothing works. What can I use to take up that margin space???
- <meta name="viewport" content="target-densitydpi=device-dpi, height=device-height, width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1.0, maximum-scale=1">
- <body>
- <div data-role="page" id="home">
- <div data-theme="b" data-position="fixed" data-role="header" data-tap-toggle="false" style="height:60px">
- //Header takes up the full width
- </div>
- </div>
- <div data-role="content" style="width:100%; margin:0px">
- <div class="ui-grid-solo" style="text-align:center">
- <div class="ui-block-a"><a style="height:80px; padding-top:70px" data-transition="none" class="ui-bar ui-bar-e" href="news.html"></a></div>
- </div>
- <div class="ui-grid-a" style="text-align:center">
- <div class="ui-block-a"><a style="height:80px; padding-top:50px" data-transition="none" class="ui-bar ui-bar-e" href="rumors.html"></a></div>
- <div class="ui-block-b"><a style="height:80px; padding-top:50px" data-transition="none" class="ui-bar ui-bar-e" href="columns.html"></a></div>
- <div class="ui-block-a"><a style="height:80px; padding-top:50px" data-transition="none" href="scores.html" class="ui-bar ui-bar-e"></a></div>
- <div class="ui-block-b"><a style="height:80px; padding-top:50px" data-transition="none" href="standings.html" class="ui-bar ui-bar-e"></a></div>
- </div>
- </div>
- </body>
I tried placing the widths everywhere, to every div (grids and blocks) and no luck...any advice?