Css 下拉面板未与Angular中的下拉文本框垂直对齐

我用的是Angular、Angular Material和CSS

我正在try 对齐mat-select下拉菜单的面板

<mat-select disableOptionCentering class="sort-portals" value="newest" panelClass="custom-panel-order-types">
    <mat-option value="newest">Newest</mat-option>
    <mat-option value="oldest">Oldest</mat-option>
    <mat-option value="ascending">Sort A to Z</mat-option>
    <mat-option value="descending">Sort Z to A</mat-option>
</mat-select>

有两个类- sort-portals和custom-panel-order-types

.sort-portals {
    background: $white;
    max-width: 150px;
    margin-left: auto;
    margin-bottom: 0;
    padding: 6px 6px 6px 11.5px;
}

.custom-panel-order-types {
  margin: 34px 0px !important;
  min-width: 150px !important;
}

下拉列表的屏幕截图如下所示.

EDIT

下拉列表的CSS如下所示.它位于组件CSS文件中.但custom-panel-order-types号在styles.scss号档案里...

.admin-header {
    display: flex;
    margin-bottom: 18px;

    h2 {
        margin: 0;
    }

    .sort-portals {
         background: white;
         max-width: 150px;
         margin-left: auto;
         margin-bottom: 0;
         padding: 6px 6px 6px 11.5px;
    }
}

尽管有了答案代码，面板仍在更多地向左侧移动.

如何将面板垂直对齐下拉文本框？