Изображение в заголовке jQuery Mobile

Я пытаюсь добавить изображение в заголовок моей веб-страницы на основе jQuery Mobile.

Я хочу, чтобы изображение было выровнено по правому краю и использовало для этой цели CSS. Но результаты неудовлетворительно.

(Проблема*) Между изображением и краем большой зазор, а также он не выровнен с текстом заголовка.

Вот код заголовка:

<header data-role='header'><h1>My App<img src="my_logo.png" alt="Low resolution logo"class="align-right"/></h1></header>

а вот код CSS для class align-right:

.align-right{ 
    float:right; 
    margin-right: 5px;
}