title: how do I prevent elements to move, when I increase the font size of an element when hovering?
body: <p>I want to increase the font size of .navbar span when hovering, which works perfectly fine, but the elements around it move with the increased font size. How do I prevent this?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar {
      padding: 15px;
      margin: -8px;
      border: 1px solid hsla(0, 0%, 95%, 0.5);
  }
  
  .navbar span {
      margin: 70px;
      font-weight: 600;
  }
  
  .navbar span:hover {
      font-size :20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;body&gt;
        &lt;header&gt;
          &lt;nav&gt;
              &lt;div class="navbar"&gt;
                  &lt;span&gt;Startseite&lt;/span&gt;
                  &lt;span&gt;Speisekarte&lt;/span&gt;
                  &lt;span&gt;Kontakt&lt;/span&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;h1 class="main_header"&gt;Julio's Pizza&lt;/h1&gt;
        &lt;/header&gt;
     &lt;body/&gt;    </code></pre>
  </div>
  </div>
  </p>