Невозможно выровнять второй столбец flexbox по левому краю

Question

Моя проблема заключается в следующем: у меня есть flexbox, который помещает итоговый раздел и раздел изображения в ряд.Сводный раздел представляет собой вложенный flexbox, который отображает 3 списка в качестве первого столбца и горизонтальный список типов почвы в качестве второго столбца.Проблема в том, что содержимое второго столбца находится в центре, а я хочу, чтобы он выровнялся по левому краю в той же начальной позиции, что и столбец списков выше.Вот изображение текущей ситуации:

Я пытался использовать justify-content: flex-start, align-items: flex-start, margin-left: 0px; margin-right: auto; и margin-left:-500px,но каждый раз второй столбец остается зафиксированным в центре.Может кто-нибудь сказать, пожалуйста, что я должен сделать, чтобы переместить содержимое второго столбца вправо?Спасибо,

Вот код:

HTML:

        <div class="flexBox flexItem">
              <div class="summary">
                <div class="flexBox flexItem test">
              <ul class="details">
                <li><strong>Days until harvest:</strong>   {{seedDetails.growthTime}}</li>
                <li><strong>Required sun exposure:</strong> {{sunExposure}}</li>
                <li><strong>Plant height:</strong> {{seedDetails.plantHeight | measure : distancePipeArgument : true}}</li>
                <li><strong>Plant width:</strong> 15 inch</li>
              </ul>

              <ul class="details">
                <li><strong>Germinates after:</strong> 14 days</li>  
                <li><strong>Germination temperature:</strong> {{seedDetails.growthTemperature | measure: temperaturePipeArgument : true}}</li>
                <li><strong>Row spacing:</strong> {{seedDetails.rowSpacing | measure : distancePipeArgument : true}}</li>
                <li><strong>Plant spacing:</strong> {{seedDetails.plantSpacing | measure : distancePipeArgument : true}}</li>
              </ul>

              <ul class="details">
                <li><strong>Sow depth:</strong> {{seedDetails.sowDepth | measure : distancePipeArgument : true}}</li>
                <li><strong>Life cycle:</strong> {{seedDetails.lifeCycleType | titlecase}}</li> 
                <li><strong>Hardy at:</strong> {{seedDetails.hardiness | measure: temperaturePipeArgument : true}}</li>
                <li><strong>Maximum temperature:</strong> {{seedDetails.maximumTemperature | measure: temperaturePipeArgument : true}}</li>
              </ul>
                </div>

                <div class="soils">
                <ul>
                  <li class="inline"><strong>This plant grows well in:</strong></li><li class="inline">                                
                    <mat-chip-list> 
                    <mat-chip style="margin-right:8px; background-color:aquamarine;" *ngFor="let soilType of soilTypes" [selectable]="selectable" (click)="showDialog(soilType)">  
                        {{soilType}}
                    </mat-chip>  
                  </mat-chip-list></li>
                </ul>
              </div>
            </div>
                <figure class="carousel">
                  <div class="crop shadow">
                  <input type="image" [src]="seedDetails.imagePreview" class="thumbnail" (click)="showDialog(image)"/>
                </div>
                  <small>Click to view full image</small>
                </figure>
          </div>

CSS:

    .flexItem {
        max-width: 1100px;
    }


    .flexBox{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex; 
    }

    ul.details{
        margin-left: 0px;
        padding-left: 0px;
        flex: 1 1 300px;
    }


      .inline{
          display: inline-block; 
         }

      .soils{

            align-items: flex-start;
      }

  .summary{
      display:flex;
      flex-direction:column;
      justify-content: flex-start;
      align-items: flex-start;
      /* justify-content: flex-start;
      text-align: left; */
      width:85%;
      /* align-items: flex-start; */
      /* border: solid grey 1; */
  }

    .carousel{
        width: 250px;
        height: 250px;
        /* overflow:hidden; */
        background-color: gray;
        flex: 1 1 250px;
        /* margin-left: 0px; */
    }

    .crop{
        width: 250px;
        height: 250px;
        overflow:hidden;
    }

    .shadow{
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.4);
        border: 0.5px solid black;
    }

.test{
    width:850px;
    /* border: solid black; */
}