Unable to align the second flexbox column to the left - html

Question

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