Css making transition of margin and padding

I made a navigator on top of my website, i want it to shrink a bit when i hover over it.

.top-container ul>li{
display: inline;
float: left;
margin: 5px 15px;
padding: 0;
scale: 1;
background-color: white;
border: solid 0px #333;
transition: padding ease-out .3s, margin ease-out .3s,
border ease-out .3s, background-color ease-out .3s;
}

.top-container ul>li:hover{
background-color: red;
padding: 5px 15px;
margin: 0;
}

(its not the full code of styleSheet!)

okay so when i use use this code my list elements starting to shake when i hover over.

how can i solve this problem?
or is there a more efficient way to do this?

Also i tried scale and Transform: scale(); did not give me what i want because they scaled up the text and border too D:

Here is the WebSite the issue is current.

https://akiokiyota.github.io/RemoteWebsite/