How can ı resolve my nested div hover problem in css - html

Question

#main_div {
background-color: #333;
margin-top: 5%;
border-radius: 10px;
box-shadow: 12px 12px 18px #000;
-moz-box-shadow: 12px 12px 18px #000;
-webkit-box-shadow: 12px 12px 18px #000;
border-left: 5px solid orange;
border-top: 5px solid orange;
height: 800px;
}
a {
background-color: orange !important;
}
a:hover {
border-left: 5px solid darkorange !important;
border-top: 5px solid darkorange !important;
transition: 0.4s;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
<div id="main_div">
<a href"#">
<div><span>Hello World!</span></div>
</a>
</div>
I am trying to hover div. "a" is growing in hover position. But I have a problem As a grows, main_div grows with it. How do I prevent main_div from growing.

Answer 1

As commented above, try giving the border already some width and simply change its color on hover.
#main_div {
background: black;
padding: 1rem;
text-align: center;
}
a {
display: inline-block;
color: #fff;
border-top: 5px solid transparent;
border-left: 5px solid transparent;
padding: 1rem;
transition: all .3s ease;
}
a:hover {
transform: scale(1.1);
border-color: orange;
}
<div id="main_div">
<a href"#">
<div><span>Hello World!</span></div>
</a>
</div>