# Header items misaligned in Ionic View

**URL:** <https://forum.ionicframework.com/t/header-items-misaligned-in-ionic-view/46408>\
**Category:** ionic-v1\
**Created:** [March 14, 2016, 7:57pm UTC](https://forum.ionicframework.com/t/header-items-misaligned-in-ionic-view/46408 "2016-03-14T19:57:02Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![chipit24](https://avatars.discourse-cdn.com/v4/letter/c/ba9def/32.png) [@chipit24](https://forum.ionicframework.com/u/chipit24)\
**Post date:** [March 14, 2016, 7:57pm UTC](https://forum.ionicframework.com/t/header-items-misaligned-in-ionic-view/46408/1 "2016-03-14T19:57:02Z")

</div>

When testing my app in the browser using `ionic serve`, my app looks just fine:

![image](https://global.discourse-cdn.com/ionicframework/original/3X/a/1/a1545aa7a4a3dc505dd361a36371b160dc383ac7.jpg)

However, when I push the app to Ionic View (on my iPhone), the header items are misaligned and overlap with the content:

![image](https://global.discourse-cdn.com/ionicframework/original/3X/5/6/56710c03a4a599d124eb6ecced1af0d67e34f9be.jpg)

What could cause such a problem?

My `index.html` file (redacted):

> ```
> <ion-nav-bar class="bar bar-header bar-assertive">
> <ion-nav-buttons></ion-nav-buttons>
> </ion-nav-bar>
> 
> ```

> ```
> <ion-nav-view></ion-nav-view>
> 
> ```

My `home.html` file (redacted), which contains the header and container content:

> ```
> <ion-view>
> <ion-nav-buttons>
> <button nav-direction="back" ui-sref="settings" class="button button-icon icon ion-gear-b"></button>
> <div class="h1 title logo-img"></div>
> <button class="button button-icon icon ion-person"></button>
> </ion-nav-buttons>
> 
> ```

> ```
> <ion-content scrollbar-x="false" class="has-header has-footer">
> <div ng-repeat="post in homeCtrl.posts" class="list card">
> <!-- card contents in here -->
> </div>
> </ion-content>
> ...
> </ion-view>
> 
> ```