jQuery Mobile Button Icon in Header goes underneath

Question

In my header of my page I have to put two button side by side. For ref, see the screen shot below.

But after using following code, the icons are over lapping each other. For Ref. see the screen shot below.

<div data-theme="a" data-role="header" data-position="fixed"> <a data-role="button" data-rel="back" data-theme="a" href="#homepage" data-icon="back" data-iconpos="left" class="ui-btn-left"> Back </a>
<h3> Header </h3>
<a data-role="button" href="#homepage" data-icon="home" data-iconpos="notext" class="ui-btn-right home_icon_top"></a> 

I am using jQuery Mobile.

Answer 1

.home_icon_top{
    right:50px !important;
}

Adjust the value of the right as your wish.

DEMO