Some problem with the layout while running app on the phone

ionic-v1
1

So I start a new blank fresh application and then I see the blank page on my web browser it looks fine with the header “Ionic header” on the top center. However, when I run the application on my phone the header that is to be in the center is displayed on top right. I try putting the header in tags but then when I add a header button it shifts a bit towards right. How can I resolve this?

2

Could you share some code or put a codepen together? Maybe theres a missing tag somewhere in there

3 
<ion-pane>
  <ion-header-bar class="bar-stable">
    <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content>
  </ion-content>
</ion-pane>

It is the code that is generated by running ionic start myapp blank. No changes made to it.