title: Vue, Vuetify - Reduce space between buttons in toolbar
body: <p>I've tried everything to reduce the space between the buttons, so that they all sit nicely centered and evenly spaced in the toolbar when on mobile, but for some reason the space next to the left-most button remains, while the right-most button is slightly over the right edge, as seen in the pic below.</p>
  
  <p>Here's the last thing I tried before coming to ask a question here:</p>
  
  <pre><code>&lt;!-- Notice the "ma-0 pa-0" that I've now added in literally everywhere --&gt;
  &lt;v-toolbar fixed color="teal lighten-1" dark class="hidden-md-and-up ma-0 pa-0"&gt;
      &lt;v-toolbar-items class="ma-0 pa-0"&gt;
          &lt;v-btn 
              flat 
              v-for="link in navigation" 
              :key="link.text" 
              :class="{ 'teal lighten-2':link.active }" 
              @click="$vuetify.goTo(link.link, { duration:1000, offset:60, easing:'easeInOutCubic' })"
              class="mobile ma-0 pa-0"
          &gt;
              &lt;v-icon&gt;{{ link.icon }}&lt;/v-icon&gt;
          &lt;/v-btn&gt;
      &lt;/v-toolbar-items&gt;
  &lt;/v-toolbar&gt;
  </code></pre>
  
  <p>I've also tried things like creating a custom style rule (non-scoped, otherwise Vuetify seems to ignore 'em) like <code>.v-btn.mobile { margin:0; padding:0 }</code> to no avail, and trying all the different <code>justify-</code> attributes.</p>
  
  <p>Other than that I've also tried different Vuetify elements like <code>v-footer</code>, and adding in <code>v-container</code>s, <code>v-layout</code>s and <code>v-flex</code>s. None of which seem to work.</p>
  
  <p><a href="https://i.stack.imgur.com/ZYZOw.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZYZOw.jpg" alt="enter image description here"></a></p>
  
  <p>The image is a screenshot from my phone, while connected to the vue dev server on my pc on the same network, in case that makes a difference.</p>