How to spread tab items evenly?

I'm developing new administration page. On that registration page I need to have a menu with five tabs for each administration section. We are using ant for angular and for tab menu we are using component from ant library.

I have tried to override style for ant tabs as described here:

How To Evenly Space Tabs Across the Whole Tab Bar

and here

https://github.com/NG-ZORRO/ng-zorro-antd/issues/2242

None of those articles helped.

Here is code example

    <nz-tab nzTitle="LAN STATUS">
      Content of Tab Pane 1
    </nz-tab>
    <nz-tab nzTitle="DHCP">
      Content of Tab Pane 2
    </nz-tab>
    <nz-tab nzTitle="DNS">
        Content of Tab Pane 2
      </nz-tab>
      <nz-tab nzTitle="USERS">
          Content of Tab Pane 2
      </nz-tab>
      <nz-tab nzTitle="AMAZON SERVICES">
          Content of Tab Pane 2
      </nz-tab>
  </nz-tabset>

I would like to have a evenly spaced element inside

Solution

Angular have encapsulation components so you should use deep or disable that encapsulation (I prefer use deep).

@Component({
  selector: 'second-cmp',
  template: `<div class="cmp">Second Component</div>`,
  styles: ['.cmp { border: green 2px solid; }'],
  encapsulation: ViewEncapsulation.None  // Use to disable CSS Encapsulation for this component
})

:host ::ng-deep nz-tab X{
    color: red;
}