It seems like everything you have done is correct so far. The only adjustment needed is to nest the <v-container>
inside the <v-card-text>
for proper alignment. Additionally, the button on the right should only have a col-1 width, not col-2. If you don't specify a col width for the element containing the button, it will take up the full space and affect the alignment of the container as well. Another solution would be to set the width of the container using CSS like this:
<v-container style="width:600px;">
<v-card color="grey lighten-3">
<v-card-text>
Question: How can I visually center the margin on both sides of the v-col with the <v-icon color="green">mdi-check</v-icon> button that currently has a minimum column width?
<v-container> //Either give a width here style="width:600px;"
<v-row v-for="(item,i) in 5"
:key="i" class="mb-1" no-gutters justify="center">
<v-col cols="10">
<v-expansion-panels>
<v-expansion-panel>
<v-expansion-panel-header>Item</v-expansion-panel-header>
<v-expansion-panel-content>
Lorem ipsum dolor sit amet
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</v-col>
<v-col> //or set cols="1" here
<v-btn class="closeBtn mb-1 ml-1" width="36px">
<v-icon color="green">mdi-check</v-icon>
</v-btn>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-card>