Vuetify 2 rows but rendering like 2 columns - vuetify.js

Question

I'm using vuetify and have this:
<v-container
class="d-flex justify-center mb-6"
:color="$vuetify.theme.dark ? 'grey darken-3' : 'grey lighten-4'"
flat
tile
>
<v-row justify="center">
<v-col>
<h1>This is an about page</h1>
</v-col>
</v-row>
<v-row justify="center">
<v-col>
<p>
The logo is licensed with the
<a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
Creative Commons License</a
>
and is provided by
<a href="https://www.iconfinder.com/laurareen/" target="_blank">
iconfinder</a
>
</p>
</v-col>
</v-row>
</v-container>
It renders like this:
How can I make this render 2 rows instead???
I tried adding sm="12" to each column but same thing.

Answer 1

to have a better understanding about vuetify's grid system you can read the doc here.
but in short according to the doc:
v-container provides the ability to center and horizontally pad your site’s contents.
you don't need to set class="d-flex justify-center" on this element.
also according to v-container API page, this component does not accept flat and tile as prop.
remove these props and classes and you should be good.
check the demo below:
Vue.config.productionTip = false;
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-row justify="center">
<v-col>
<h1>This is an about page</h1>
</v-col>
</v-row>
<v-row justify="center">
<v-col>
<p>
The logo is licensed with the
<a href="https://creativecommons.org/licenses/by-nc/3.0/" target="_blank">
Creative Commons License</a>
and is provided by
<a href="https://www.iconfinder.com/laurareen/" target="_blank">
iconfinder</a>
</p>
</v-col>
</v-row>
</v-container>
</v-main>
</v-app>
</div>