I have two divs, when one hovers over the text (which are links) of a div, the padding increases from 0 to 5px. My issue is that whenever I hover over the text and the padding increases, the divs move down. Here's the code:

```
<div id="container" class="text1">
<a id="text1style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">Some text</a>
</div>

<div id="container" class="text2">
<a id="text2style" href="#" style="font-family:arial;font-size:120%;
text-decoration:none;">text</a>
</div>

#container {
position:relative;
}

a:link, a:visited, a:active {
color:blue;
}

a:hover {
color:yellow;
}

.text1box {
left:200px;
bottom:35px;
width:243px;
}

#text1style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}

#text1style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}

.text2 {
left:455px;
bottom:57px;
width:90px;
}

#text2style {
-webkit-transition:color 0.5s;
-o-transition:color 0.5s;
-moz-transition:color 0.5s;
-ms-transition:color 0.5s;
transition:color 0.5s;
-webkit-transition:background-color 0.5s;
-o-transition:background-color 0.5s;
-moz-transition:background-color 0.5s;
-ms-transition:background-color 0.5s;
transition:background-color 0.5s;
}

#text2style:hover {
padding:5px;
border-radius:10px;
background-color:red;
}

```

**Updated code**: I have applied the padding expansion to the individual links, instead of the div, and this has helped out. I still have two issues: 1) The texts (of links) still shift slightly to the right. 2) When I remove the mouse (i.e: hover ends) you can see that the text has lost padding and border radius as the background (red) fades away.

How could I resolve these two issues? Many thanks.