Основная причина этого заключается в том, что вы используете отступы для выделения вашего элемента, общий размер вашего блока рассчитывается путем суммирования ширины содержимого, высоты содержимого, отступов и границ (ширина содержимого + отступы влево + отступы вправо + border-left + border-right) (высота содержимого + padding-top + padding-bottom + border-top + border-bottom), поэтому при увеличении отступа поля его размер будет увеличиваться, и в результате он может pu sh соседние ящики.
Отметьте блочная модель , чтобы понять больше 
Решение:
Один из способов решить эту проблему - определить свой box-sizing для border-box, это предотвратит увеличение общего размера поля за счет уменьшения размера содержимого относительно границы и отступов. Было бы хорошо, если бы вы добавили это свойство к каждому элементу на своей странице, добавив следующий css код:
*{
box-sizing: border-box;
}
Решение вашей проблемы:
Один из способов выделить ваш элемент - используя transform: scale (value), scale () изменит размер вашего элемента, как показано в документации (увеличьте, если значение> 1, уменьшите, если значение <1), ваш код должен выглядеть следующим образом, не стесняйтесь изменять значение, чтобы понять, как это работает: </p>
#sellbox:hover{
transform: scale(1.03);
box-shadow: rgb(54,54,53) 3px;
}
/* Add a black background color to the top navigation */
*{
box-sizing: border-box;
}
body {
margin: 0px;
background-color: rgb(89, 90, 74);
}
.menu {
background-color: rgb(54,54,53);
overflow: hidden;
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
z-index: 4;
}
.menu a {
font-size: 30px;
font-family: Arial, sans-serif;
color: rgb(176, 254, 118);
text-decoration: none;
margin-left: 15px;
}
.container {
width: 90%;
margin-left: 8%;
margin-right: 8%;
overflow: hidden;
margin-top: 70px;
padding: 30px 0px;
position: absolute;
}
.container div {
display: block;
position: relative;
margin-left: 15px;
margin-bottom: 15px;
width: 250px;
height: 450px;
overflow: hidden;
background-color: rgb(255,255,255);
color: rgb(255,255,255);
float: left;
background-color: rgb(176, 254, 118);
border-radius: 15px;
}
.ahover:hover{
color: rgb(255,255,255);
transition: 0.6s;
}
.ahover:not(:hover){
color: rgb(176, 254, 118);
transition: 0.6s;
}
#sellbox {
color: rgb(54,54,53)
}
#sellbox ul {
list-style: none
}
#sellbox #element {
font-size: 25px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-bottom: 3px;
}
#sellbox #title {
text-align: center;
font-size: 30px;
margin-top: 4px;
font-family: Arial, Helvetica, sans-serif;
}
#sellbox:hover{
transform: scale(1.03);
box-shadow: rgb(54,54,53) 3px;
}
#sellbox:not(:hover){
padding: 0px;
box-shadow: none;
}
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="menu">
<a class="ahover" href="#home">
Home
</a>
<a class="ahover" href="#contact">
Contact us
</a>
<a class="ahover" style="margin-left: 78%;" href="#signup">Sign up</a>
</div>
<div class="container">
<div id="sellbox">
<p id="title">Buy me now</p>
<p id="element">whew</p>
<p id="element">whew</p>
<p id="element">whew</p>
<p id="element">whew</p>
<p id="element">whew</p>
<p id="element">whew</p>
<p id="element">whew</p>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
</body>
</html>