Reduce the spacing between round fab buttons

Hi

This is how the fab buttons look like:

image

I would like to reduce the spacing between them and have them centred in my pag so it looks more like:
image

This my code

  <ion-row>
    <ion-col class="favbuttoncol">
      <ion-fab-button class="fabbuttongraph" fab-fixed (click)="graphbutton(1)">
        <ion-text>Global</ion-text>
      </ion-fab-button>
    </ion-col>
    <ion-col class="favbuttoncol">
      <ion-fab-button class="fabbuttongraph" fab-fixed (click)="graphbutton(2)">
        <ion-text>PM 2.5</ion-text>
      </ion-fab-button>
    </ion-col>
    <ion-col class="favbuttoncol">
      <ion-fab-button class="fabbuttongraph" fab-fixed (click)="graphbutton(3)">
        <ion-text>VOC</ion-text>
      </ion-fab-button>
    </ion-col>
    <ion-col class="favbuttoncol">
      <ion-fab-button class="fabbuttongraph" fab-fixed (click)="graphbutton(4)">
        <ion-text>N02</ion-text>
      </ion-fab-button>
    </ion-col>
    <ion-col class="favbuttoncol">
      <ion-fab-button class="fabbuttongraph" fab-fixed (click)="graphbutton(5)">
        <ion-text>C02</ion-text>
      </ion-fab-button>
    </ion-col>
  </ion-row>

CSS file

fabbuttongraph
{
//width: 20%;
text-align: center;
–background: #108684;
position: relative; /* Declared position allows for location changes */
top: 10px;
–background-activated: #3fb8b6;
}

favbuttoncol
{
text-align: center;
–background: #108684;
position: relative; /* Declared position allows for location changes */
top: 10px;
–background-activated: #3fb8b6;

}

What do I need to change so that I can centre button and also reduce spacing?