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>



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

    <div class="list list-inset" >

        <div class="item" ng-repeat="x in locations">


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


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

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


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) ?