title: Vuetify Container max-width fixed
body: <p>I am building a web application with Vue.js and Vuetify (<a href="https://vuetifyjs.com/en/" rel="noreferrer">https://vuetifyjs.com/en/</a>). 
  I have a simple layout, with 3 columns. However, I would like the 3 columns to fill the whole width of the page, but there is an automatic piece of CSS that enforces max-width to 960px. Why is that? How can I use the whole screen? You can also check it here: <a href="https://codepen.io/mlikoga/pen/KeLNvy" rel="noreferrer">https://codepen.io/mlikoga/pen/KeLNvy</a></p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app&gt;
      &lt;v-content&gt;
        &lt;v-container ma-0 pa-0 fill-height&gt;
          &lt;v-layout row&gt;
            &lt;v-flex xs4&gt; Chat List &lt;/v-flex&gt;
            &lt;v-flex xs4&gt; Main Chat&lt;/v-flex&gt;
            &lt;v-flex xs4&gt; User Profile&lt;/v-flex&gt;
          &lt;/v-layout&gt;
        &lt;/v-container&gt;
      &lt;/v-content&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The automatic CSS:</p>
  
  <pre><code>@media only screen and (min-width: 960px)
  .container {
    max-width: 960px;
  }
  </code></pre>