title: Material pagination dropdown out of place
body: <h2>Issue</h2>
  
  <p>I am currently implementing a <code>&lt;mat-table&gt;</code> with a <code>&lt;mat-paginator&gt;</code> attached to it. The only problem is that the dropdown for items per page is being offset to the left. For what seems like outside of the Bootstrap <code>container</code>.</p>
  
  <p>Here is an image of what is happening. You can see the location of the dropdown and the location of the items are completely wrong.
  <a href="https://i.stack.imgur.com/AQNUb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AQNUb.png" alt="Offset"></a></p>
  
  <hr>
  
  <h2>Code</h2>
  
  <p>My entire site is inside of a bootstrap container so my <code>app.component.html</code> basically looks like this:</p>
  
  <pre><code>&lt;app-header&gt;&lt;/app-header&gt;
  &lt;div class="container mt-3"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  &lt;app-footer&gt;&lt;/app-footer&gt;
  </code></pre>
  
  <p>The page in questions is just a simple material table with the pagination added to the bottom.</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-12"&gt;
      &lt;mat-table *ngIf="items" [dataSource]="items" matSort&gt;
  
        &lt;!-- ID Column --&gt;
        &lt;ng-container matColumnDef="type"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Type &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.type}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Provider Column --&gt;
        &lt;ng-container matColumnDef="provider"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Provider &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; &lt;a href="https://eosauthority.com/account/{{row.provider}}" target="_blank"&gt;{{row.provider}}&lt;/a&gt; &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Name Column --&gt;
        &lt;ng-container matColumnDef="url"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; URL &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.url}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Color Column --&gt;
        &lt;ng-container matColumnDef="country"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Country &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.country}} - &lt;span class="flag-icon flag-icon-{{row.country | lowercase}}"&gt;&lt;/span&gt; &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;!-- Color Column --&gt;
        &lt;ng-container matColumnDef="updated_on"&gt;
          &lt;mat-header-cell *matHeaderCellDef mat-sort-header&gt; Updated &lt;/mat-header-cell&gt;
          &lt;mat-cell *matCellDef="let row"&gt; {{row.updated_on}} &lt;/mat-cell&gt;
        &lt;/ng-container&gt;
  
        &lt;mat-header-row *matHeaderRowDef="['type', 'provider', 'url', 'country', 'updated_on']"&gt;&lt;/mat-header-row&gt;
        &lt;mat-row *matRowDef="let row; columns: ['type', 'provider', 'url', 'country', 'updated_on']"&gt;
        &lt;/mat-row&gt;
      &lt;/mat-table&gt;
  
      &lt;mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>