Angular изменение триггера положения мат-меню при разном разрешении экрана

Question

[you can see that the panel does not open in the right place when you click][1]


  [1]: https://i.stack.imgur.com/3kmWL.jpg

вы можете видеть, что панель не открывается в нужном месте, когда вы нажимаете кнопку меню при изменении разрешения экрана, я пытаюсь исправить это с помощью :: ng-deep .mat-menu-content, но без изменений

<!--My HTML-->

<div class="header">
  <img class="israelHIcon" src="../../assets/israel-icon.jpg">
  <div class="menuPanel">
    <div class="matBtn ">
      <span class="menuText">MENU</span>
      <button class="matBtn" mat-button [matMenuTriggerFor]="menu" ><i class="fas fa-bars"></i></button>
    </div>
    <mat-menu #menu="matMenu" class="matMenu" >
      <button  style="outline: none" mat-menu-item>VEHICLES</button>
      <button style="outline: none" mat-menu-item [routerLink]="['/self-drive']">MAKE a RESERVATION</button>
      <button style="outline: none" mat-menu-item>TERMS and CONDITIONS</button>
      <button style="outline: none" mat-menu-item>FIRST TIME RENTERS</button>
      <button style="outline: none" mat-menu-item>F A Q</button>
      <button style="outline: none" mat-menu-item>CONTACT</button>
      <button [routerLink]="['/']" style="outline: none" mat-menu-item>HOME</button>
    </mat-menu>
  </div>
  <div id="opacityPanel"><!-- simple frame --></div>
</div>

<router-outlet></router-outlet>





//My scss



.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: black;
  height: 12%;
  z-index: 1;
}
.israelHIcon{
  position: absolute;
  height: 50px;
  border-radius: 50%;
  float: left;
  margin: 13px;

}
.matBtn{
  font-size: 230%;
}
.menuPanel {
  color: white;
  display: flex;
  justify-content: flex-end;
  top: 0;
}


.mat-menu-content{
  background: black;
  .mat-menu-item {
    width: 100%;
    color: white;

    &:hover{
      background: blue;
    }
  }
}
#opacityPanel{
  position: fixed;
  top: 12%;
  z-index: 1570;
  height: 40px;
  width: 100%;
  background-color: #FFFFFF;
  min-width: 1102px;
  opacity: 0.6;
}


#opacityPanelHeader{
  position: fixed;
  top:12%;
  width: 100%;
  height: 35px;
  background: white;
  opacity: 0.85;

}
.bcgImg{
  max-width: 100%;
  max-height: 100%;
}

///footer
#u409361-2, #u84794-3, #u84828-2, #u84803-7, #u85805-9, #u85811-7, #u85826-8, #u85823-7, #u85829-7, #u85844-7, #u85841-7, #u84798 {
  font-family: lato, sans-serif;
  font-weight: 700;
}
#u409361-4, #u86648-2, #u167370-2 {
  font-family: lato, sans-serif;
  font-size: 30px;
  line-height: 45px;
  font-weight: 400;
}
#u409361-23 {
  text-align: center;
  background-color: #93D500;
  min-height: 349px;
  letter-spacing: 1px;
  z-index: 1525;
  padding: 30px 50px;
}

#u83762-4 {
  text-align: center;
  padding-top: 25px;
  padding-bottom: 25px;
  font-weight: 300;
  font-size: 20px;
  min-height: 0;
  font-family: lato, sans-serif;
  background-color: #000000;
  z-index: 54;
  letter-spacing: 8px;
  color: #FFFFFF;
  line-height: 24px;
}
.cars{
  display: block;
  border: 0 solid;
  transform-origin: left top;
  width: 375px;
  height: 281px;
}
#u183298, #u183305, #u486595, #u183291, #u183284, #u183542-2, #u486256-2, #u183549-2, #u183556-2, #u183775-2, #u462573-2, #u486119-2, #u183782-2, #u183789-2 {
  font-family: lato, sans-serif;
  line-height: 38px;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 1px;
  text-align: left;
}
#u183284-10{
  font-family: lato, sans-serif;
  line-height: 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 1px;

}



//Media Query's
@media screen and (max-width: 650px) {
  .bcgImg {

  }
}

.justifyContentClass{
  display: flex;
  justify-content: space-around;
  align-items: center;
}

///Media Query

//top button menu Media Query's

@media screen and (max-width: 1140px){
  .matBtn{
    font-size: 260%;
  }
  .menuText{
font-size: 150%;
  }
}

@media screen and (max-width: 1140px){
  .matBtn{
    font-size: 260%;
  }
  .menuText{

  }
}


@media screen and (max-width: 802px){
  .matBtn{
    font-size: 300%;
  }
  .menuText{
   font-size: 160%;
  }
}

@media screen and (max-width: 632px){
  .matBtn{
    font-size: 340%;
  }
  .menuText{
    font-size: 160%;
  }
}

@media screen and (max-width: 504px){
  .matBtn{
    font-size: 370%;
  }
  .menuText{
    font-size: 160%;
  }
}

@media screen and (max-width: 410px){
  .matBtn{
    font-size: 420%;
  }
  .menuText{
    font-size: 200%;
  }
}

//

вы можете видеть, что панель не открывается в нужном месте, когда вы нажимаете кнопку «Меню» при изменении разрешения экрана, я пытаюсь исправить это с помощью :: ng-deep .mat -menu-content, но без изменений