title: Image in jQuery Mobile Header
body: <p>I am trying to add an image in the header of my jQuery Mobile based web page.</p>
  
  <p>I want the image to be aligned to the right edge and using CSS for this purpose. But the results are not satisfactory. </p>
  
  <p><strong>(Problem*)There is a big gap between the image and the edge and it is also not aligned with the header text.</strong></p>
  
  <p>Here is the header code:</p>
  
  <pre><code>&lt;header data-role='header'&gt;&lt;h1&gt;My App&lt;img src="my_logo.png" alt="Low resolution logo"class="align-right"/&gt;&lt;/h1&gt;&lt;/header&gt;
  </code></pre>
  
  <p>and here is the CSS code for class align-right:</p>
  
  <pre><code>.align-right{ 
      float:right; 
      margin-right: 5px;
  }
  </code></pre>