How to remove padding for Jquery Mobile Panel form?

Question

As soon as I add a form tag I get this nasty padding around the form elements. Is there any way around this?

Screenshot: https://s3.amazonaws.com/thom-temp/jquerymobile-wtf.png

<div id="advancedSearch" data-role="panel" data-position="right" data-display="push">
  <div data-role="header">
    <h1>Search</h1>
    <a id="searchButton" href="#" class="ui-btn-right" data-role="button" data-theme="d" data-icon="search">Go</a>
  </div>

  <div data-role="content">
    <form style="margin: 0px; padding: 0px;" id="yw2" action="/mshi/index-test.php/inspection/list" method="get">
      <ul data-role="listview" data-inset="false" data-theme="a">

        <li data-role="fieldcontain">
          <input placeholder="Id" name="inspection[id]" id="inspection_id" type="text" />
        </li>
      </ul>
    </form>
  </div>
</div>

Answer 1

Override .ui-panel-inner's padding

.ui-panel-inner { 
  padding: 0 !important;
}

Demo

Answer 2

Add margin: 0px; padding: 0px; in your 'header' and 'content' div's