Grid system not working as expected in a Vuetify v-footer - vue.js

Question

I am trying to get all of my links in three columns in my footer with the copyright line below that. However, my copyright line is showing up in a phantom fourth column and it overlaps the third column if the screen width gets too small. If I use the same layout in my content section, I get the three columns.
Here is my footer component:
<template>
<div>
<v-footer color="primary lighten-1" padless>
<v-row justify="center">
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
</v-col>
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Data Sources
</v-btn>
</div>
</v-col>
<v-col cols=4>
<div class="my-1">
<v-btn color="white" text rounded>
Browse Maps
</v-btn>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p class="text-center grey--text text--lighten-2">Copyright 2020, </p>
</v-col>
</v-row>
</v-footer>
</div>
<template>
On a possibly related note, why do I have to wrap each button in a div with a my-? class to get the buttons to stack vertically.
Edit:
I am using Vuetify v2.2.11.
Here is a screenshot of what it is doing:
Here is what I want:
My buttons that are within the same column are showing up side/side unless I either wrap them in the my-? classed div or there is not enough room in the column to display them side/side. I would like them stacked on top of each other in every screen size. And of course I only want the three columns for my buttons

Answer 1

A v-row only works as expected if wrapped in a v-container.
Add a <v-container fluid> around your v-rows and it should work just fine. Fluid is described as "Removes viewport maximum-width size breakpoints", thus removing the horizontal padding.
The whole thing would look like this in the end:
<template>
<div>
<v-footer color="primary lighten-1" padless>
<v-container fluid>
<v-row class="text-center">
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
<div class="my-1">
<v-btn color="white" text rounded>
Contact Us
</v-btn>
</div>
</v-col>
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Data Sources
</v-btn>
</div>
</v-col>
<v-col cols="4">
<div class="my-1">
<v-btn color="white" text rounded>
Browse Maps
</v-btn>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<p class="text-center grey--text text--lighten-2">
Copyright 2020,
</p>
</v-col>
</v-row>
</v-container>
</v-footer>
</div>
</template>