Why my footer has a margin issue with ion-footer?

I am having a little issue with a margin on the left side of my footer, as in the image:

and this is the code I am using for my template:

<ion-footer-bar align-title="left" ng-controller="FooterController">
  <div class="tabs tabs-icon-top tabs-positive tabs-striped">
    <a class="tab-item active" href="#/app/sports">
      CONTENT
    </a>
  </div>
</ion-footer-bar>

but if I do the following, everything works properly:

<div class="tabs tabs-icon-top tabs-striped" ng-controller="FooterController">
  <a class="tab-item active" href="#/app/sports">
    <i class="icon ion-ios-americanfootball"></i>
      CONTENT
  </a>
</div>

the issue here seems to be the <ion-footer> but why ?

That is not the way you should have tabs setup .

Use ion-tabs and ion-tab, not ion-footer and a link

but anyways if I do it the way you say, the issue persists once I put the ion-footer, so your comment is no helping me

Not if you use

<ion-tabs class="tabs-icon-top tabs-positive">

  <ion-tab title="Home" icon="ion-home" href="#/tab/home">
    <ion-nav-view name="home-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="About" icon="ion-ios7-information" href="#/tab/about">
    <ion-nav-view name="about-tab"></ion-nav-view>
  </ion-tab>

  <ion-tab title="Contact" icon="ion-ios7-world" ui-sref="tabs.contact">
    <ion-nav-view name="contact-tab"></ion-nav-view>
  </ion-tab>

</ion-tabs>

Anyways, it comes down to that is not the intended purpose of the ion-footer.
What you want is the ion-tabs.

exactly what I asked. Right now my code works as you saw it above.

My issue is, if I add ion-footer on top of ion-tabs, then the margin comes up.

and also, I am not working with routes in this part, so the way you say: still not the proper one.

Then don’t add the footer, or do this.

<ion-footer-bar class="tabs tabs-icon-top tabs-positive tabs-striped" ng-controller="FooterController">
    <a class="tab-item active" href="#/app/sports">
      CONTENT
    </a>
</ion-footer-bar>

I have try the way you mentioned , but seems not works well.
We also want add more components in the footer.

<ion-footer-bar class="bar-balanced">
<div class="tabs tabs-secondary tabs-icon-top">
    <div class="tab-item" ng-click="test()">
        <i class="icon ion-ios-color-filter"></i>
        Color
    </div>
    <div class="tab-item" ng-click="showPopup()">
        <i class="icon ion-ios-calculator-outline"></i>
        Size
    </div>
    <div class="tab-item" ng-click="showActionSheet()">
        <i class="icon ion-bag"></i>
        Add to cart
    </div>
</div>

<!--<button class="button button-icon icon ion-ios-cart-outline" ng-click="showPopup()"></button>-->
<!--<h1 class="title"></h1>-->
<!--<button class="button button-icon icon ion-ios-information-outline" ng-click="showActionSheet()"></button>-->