I have the following CSS:

```
.turbineContainer{
        width: 50%;
        flex-wrap: wrap;
        display: flex;

      }
      .turbineIcons{               
          background-color:white;           
          margin: 1em;
          height: 50px;
          width: 100px;
      }

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

      .left-half {
        flex-wrap: wrap;
        display: flex;
        background-color: #f7941d;
        flex: 1;
      }

      .right-half {
        background-color: #8d5022;
        flex: 1;
      }

```

here is my Html:

```
    <div class="container">
          <div class="left-half">
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>       
        </div> 
        <div class="right-half">
          here is the Right Panel             
          </div>
        </div>

```

I divided the page into two parts,left side and right side,i put the width 100% to cover whole the page width,but what is see is these two parts placed in the middle of the page,i have inclided a screenshot of what i get [![The ScreenShot](https://i.stack.imgur.com/4yqTf.jpg)](https://i.stack.imgur.com/4yqTf.jpg)