title: Elements move on hover because border is added, padding, as suggested elsewhere doesn't seem to work
body: <p>When I hover over an area on my testing website, I made it so a border is added. But because that happens, other elements move. I've looked up other posts, and they recommended adding padding, but that doesn't seem to work because it goes over other stuff.</p>
  
  <p>This is where I add the border:</p>
  
  <pre><code>#logo:hover {
    border: 2px solid cyan;
  }
  </code></pre>
  
  <p>This is what it was added to:</p>
  
  <pre><code>#logo {
      width: 200px;
      height: 200px;
      position: relative;
      top: 80px;
      line-height: 12em;
      border-radius: 200px;
      margin: 0 10px 0 10px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>Does anyone know how to help me? Also about the way I asked my question.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#logo {
      background-color: black;
      width: 200px;
      height: 200px;
      position: relative;
      top: 80px;
      line-height: 12em;
      border-radius: 200px;
      margin: 0 10px 0 10px;
      overflow: hidden;
  }
  
  #logo:hover {
    border: 2px solid cyan;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id=logo&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Greetings,
  TheWombatGuru</p>