Unable to change the margin & layout for printing in chrome browser from angular 2

I'm trying to print HTML but I'm not able to change the layout and margin of the chrome browser(refer the attached image).

PRINT() {
  window.print();
}
@media print {
  .doNotPrint {
    display: none;
  }
  * {
    -webkit-print-color-adjust: exact;
  }
  @page {
    margin: 0 !important;
    size: A4 Landscape !important;
    -webkit-print-color-adjust: exact;
  }
  html,
  body {
    margin: 0 !important;
    size: A4 Landscape !important;
    -webkit-print-color-adjust: exact;
  }
}
<form [ngClass]="themeSRVC.currentThemeNAME" fxLayout="column" fxFlex>
  <!-- navBAR -->
  <mat-toolbar id="idPrimaryTOOLBAR" color="primary" class="doNotPrint">
    <mat-toolbar-row>
      <button mat-icon-button type="button" (click)="routeSRVC.goBACK()">
        <mat-icon matTooltip="Go Back">arrow_back</mat-icon>
      </button>
      <span class="fillSPACE"></span>
      <button mat-icon-button (click)="PRINT()">
        <mat-icon matTooltip="print">print</mat-icon>
      </button>
    </mat-toolbar-row>
  </mat-toolbar>
<!-- printableCONTENT -->

<div id=“idToPRINT” fxFlex>
&lt;div fxLayout="row"&gt;
  &lt;div fxFlex="33" style="height:200px;background-color:red"&gt;Left&lt;/div&gt;
  &lt;div fxFlex style="height:200px;background-color:yellow"&gt;Center&lt;/div&gt;
  &lt;div fxFlex="33" style="height:200px;background-color:green"&gt; Right&lt;/div&gt;
&lt;/div&gt;

</div>
</form>

#angular #google-chrome