Bdtjtk

My problem is this: I have a flexbox that places a summary section and an image section in a row. The summary section is a nested flexbox that displays the 3 lists as the first column and the horizontal soiltype list as the second column. The problem is that the content of the second column is placed in the center while i want it to align to the left at the same starting position as the lists column above. Here is an image of the current situation:

I have tried using justify-content: flex-start, align-items: flex-start, margin-left: 0px; margin-right: auto; and margin-left:-500px, but everytime the second column remains fixed in the center. Can anyone please tell me what i should do to move the content of the second column to the right? Thank you,

Here is the code:

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; */

}