Ionic Header overlapping ion content

ionic-v1
1

Here is my code, what am I doing wrong ?

<ion-header class="bar-header">
    <div class="bar bar-header bar-royal">
        <h1 class="title">App</h1>

    </div>


</ion-header>

<ion-content class="has-header">



    <div class="list list-inset" >

        <div class="item" ng-repeat="x in locations">
            {{x.location}}
        </div>



    </div>


</ion-content>
<ion-footer>
    <div class="tabs tabs-icon-top">
        <a class="tab-item">
            <i class="icon ion-home"></i>
            Home
        </a>
        <a class="tab-item">
            <i class="icon ion-chatbubble"></i>
            Pharma
        </a>
        <a class="tab-item">
            <i class="icon ion-person"></i>
            My Account
        </a>
    </div>
</ion-footer>

image
Untitled.png2048×1536 425 KB

2

it is ion-header-bar and ion-footer-bar

then you do not need to set the has-header class at the ion-content

3

Thank you for your reply, i got it to work now.
Also I know not the right place to ask but as you can see in the screenshot, why do I get a cream-ish color as the background in chrome device mode ? How do i get it to show white ( the actual color of the background of my app) ?