Some problem with the layout while running app on the phone

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?

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

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

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