Column Space, CSS Grid Layout - html

Question

I am creating a Template HTML CSS page for a To-Do Application and I am using Grid Layout; Container-Fluid with Rows and Columns. I have spaced a Button, some Text, and further 2 Buttons as follows:
<div class="container-fluid">
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="flex-heading">
<i
class="fas fa-clipboard-list fa-4x icon-backgroundcolor addmain-icon"
></i>
<p class="subhead">ADD ITEM</p>
</div>
<hr />
<div class="row within">
<div class="col-6">
<label class="add_line"
>What do you want to do?</label
>
</div>
</div>
<div class="row within">
<div class="col-8">
<div class="md-form form-group">
<input
type="text"
class="form-control"
name = "description"
[(ngModel)] = "description"
placeholder="I want to do something good"
(keydown.enter)="onKeydown($event, content)"
/>
</div>
</div>
<div class="col-4">
<button
type="button"
class="btn btn-flat add-button"
(click)="open(content)"
>
<i
class="fas fa-plus-circle fa-2x add-icon"
></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-3"></div>
</div>
</div>
There are Gutters between each Column and the text goes to the next line. What can be a good way to decrease gutter space and let the text space out?