Why does a part of the sticky/fixed element go off the screen in a mobile browser?

In desktop browser all works correctly. But in mobile browser first ~20px scrolled anyway. All margins and paddings in higher elements = 0. Can you help me with this problem?

HTML:

<mat-toolbar color="primary">

  <app-my-svg style="min-width: 50px; max-width: 70%; padding-top: 10px;" #svgAnima class="svg-image"
    id="svgAnima" [mat-menu-trigger-for]="menu">
  </app-my-svg>
  <div class="hamburger">
    <mat-menu #menu="matMenu">
      <nav class="menu">
        <a mat-menu-item (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems">{{ item.label }}
        </a>
      </nav>
    </mat-menu>
  </div>

  <div class="navBar">
    <button mat-flat-button color="primary" (click)="item.fun ? item.fun() : '' " *ngFor="let item of menuItems"
      class="menuBar">
      {{item.label }}
    </button>
  </div>

  <span>Zastroycogramm </span>

</mat-toolbar>

CSS:

mat-toolbar {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    left: 0px;
    z-index: 50;
    max-height: 200px;
    width: 100%;
}

.menu {
    flex: 1;
    font-family: Roboto, 'Helvetica Neue', sans-serif; 
}

@media (min-width: 1000px) {
    .navBar {
        display: flex;
        width: 100%;
        align-items: center;
        font-family: Roboto, 'Helvetica Neue', sans-serif;

    }

    .hamburger {
        display: none;
    }
}

@media (max-width: 999px) {
    .navBar {
        display: none;
    }

    .hamburger {
        display: flex;
        width: 100%;
    }
}

I am a novice programmer and below I will add the information that you will need to clarify this issue

I just added in CSS html,body { heigth: 100% }