Angular style not apply in forms - css

Question

I am new for angular .I wrote below code and I expect below style format with my code but i can't achieve using my below code can some one help me to solve my issue.
home.component.html
<div class="card">
<form [formGroup]="userForm">
<div class="mt-5 box">
<div class="form-row">
<div class="col-md-12">
<div class="form-group mt-4">
<label>Type</label>
</div>
<div class="form-row" style="margin-top:-10px">
<div class="col">
<input type="text" formControlName="type" class="form-control" placeholder="Type">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group mt-4">
<label>Session</label>
</div>
<div class="form-row" style="margin-top:-10px">
<div class="col">
<input type="text" formControlName="session" class="form-control" placeholder="Session">
</div>
</div>
</div>
<div class="form-row mt-4">
<div class="col-md-6">
<button type="button" class="btn btn-primary" (click)="addItem()">Add</button>&nbsp
</div>
<div class="col-md-6">
<button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
</div>
</div>
</div>
</div>
</form>
<div class="col-md-8 mt-4 mb-4">
<table class="table table-bordered">
<thead>
<tr>
<th>Type</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of listData">
<td><span>{{item.type}}</span></td>
<td><span>{{item.session}}</span></td>
<td><button type="button" class="btn btn-primary" (click)="removeItems(item)">Remove</button></td>
</tr>
</tbody>
</table>
</div>
</div>
home.component.css
.box{
width: 50%;
border: 1px solid rgb(145, 138, 138);
border-radius: 25px;
padding: 0px 20px 20px 20px;
margin-left: 400px;
}
My Result
Expected
angular.json