Content Appearing Pushed To The Right

Good day

l am having a problem on my ionic2 application when deployed to an android 4.2.2 device, all the content appears heavily padded to the right as shown in the image attachment.

Your help will be greatly appreciated.

plz post code or repo url, people cant guess what you have implemented exactly.

@itlr Thanks for the response. My code is as follows:

PAGE


<ion-header>
    <ion-navbar calm>
        <ion-title>Phone Info</ion-title>
    </ion-navbar>
</ion-header>

<ion-content class="device">
    
</ion-content>

MY COMPONENT


import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import {Device} from 'ionic-native';


@Component({
    templateUrl: 'build/pages/device/device.html'
})
export class MyDevice implements OnInit {
    model: string;
    platform: string;
    version: string;
    imei: string;
    resolutions: string;
    warranty: string;

    constructor(private nav: NavController) {

    }

    ngOnInit() {
        console.debug('Device details', Device.device);
        this.model = Device.device.model;
        this.platform = Device.device.platform;
        this.version = Device.device.version;
        this.imei = Device.device.uuid;
        this.resolutions = 'string';
        this.warranty = 'string';
    }

}