Elements move on hover because border is added, padding, as suggested elsewhere doesn't seem to work

Issue

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.

This is where I add the border:

#logo:hover {
  border: 2px solid cyan;
}

This is what it was added to:

#logo {
    width: 200px;
    height: 200px;
    position: relative;
    top: 80px;
    line-height: 12em;
    border-radius: 200px;
    margin: 0 10px 0 10px;
    overflow: hidden;
}

Does anyone know how to help me? Also about the way I asked my question.

#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;
}

<div id=logo></div>

Greetings, TheWombatGuru

Solution

box-sizing: border-box doesn't really make the 'circle' render correctly with the border in this case - although it is an amazing property. If it were me, I'd change your css to the following:

#logo:hover {
border-left: 3px solid cyan;
border-right: 3px solid cyan;
padding: 0;
margin: 0 6px 0 6px;
}

and adjust your #logo class margins to

{margin: 0 9px 0 9px;}

a little 'hackier', but I prefer the behaviour

Answered By - AnnieMac