Ionic Header overlapping ion content

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>

Untitled.png2048x1536 425 KB