CSS html paragraph moving on hover - html

Question

I have some issue with a paragraph moving on hover, after some research I found many issue related with padding and margin so I tried some edit like :
to remove the padding
to remove the margin
to remove line-height
set position static or fixed on hover
Nothing worked, this mostly looks like a layout issue but I'm not very accommodate with it.
Any help would be appreciated.
#main-footer p{
font-size:16px;
}
#main-footer hr{
margin-top:0;
border-color:#19191d;
}
#main-footer .col-sm-4 p{
line-height: 30px;
margin: 0 !important;
}
#main-footer .col-sm-4 p.address{
padding-left: 28px;
}
#main-footer .container a{
color: #ffffff;
}
#main-footer .container a:hover{
color: #d6c087;
position: static;
}
#main-footer .container a:active, a:visited, a:focus{
text-decoration: none;
}
#main-footer img{
width: 24px !important;
height: 24px !important;
}
.social-links {
list-style:none;
margin:0;
padding:0;
margin-bottom:20px;
}
.social-links li{
display:inline-block;
margin:0 5px;
border-radius:3px;
box-shadow:0 4px 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a {
display:block;
color:#fff;
color:rgba(255,255,255,0.3);
font-size:18px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.2);
border-radius:50%;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a:hover {
color:#fff;
background:#38A5DB;
}
<div class="container">
<hr>
<h4>Tittle</h4>
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>

Answer 1

Adding this should work:
p:hover {
padding-left: 20px;
transition: .5s;
}
p {
transition:.25s;
}
Try it in action in the snippet below.
#main-footer p{
font-size:16px;
}
#main-footer hr{
margin-top:0;
border-color:#19191d;
}
#main-footer .col-sm-4 p{
line-height: 30px;
margin: 0 !important;
}
#main-footer .col-sm-4 p.address{
padding-left: 28px;
}
#main-footer .container a{
color: #ffffff;
}
#main-footer .container a:hover{
color: #d6c087;
position: static;
}
#main-footer .container a:active, a:visited, a:focus{
text-decoration: none;
}
#main-footer img{
width: 24px !important;
height: 24px !important;
}
.social-links {
list-style:none;
margin:0;
padding:0;
margin-bottom:20px;
}
.social-links li{
display:inline-block;
margin:0 5px;
border-radius:3px;
box-shadow:0 4px 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a {
display:block;
color:#fff;
color:rgba(255,255,255,0.3);
font-size:18px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.2);
border-radius:50%;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a:hover {
color:#fff;
background:#38A5DB;
}
p:hover {
padding-left: 20px;
transition: .5s;
}
p {
transition:.25s;
}
<div class="container">
<hr>
<h4>Tittle</h4>
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>

Answer 2

I've added this:
p:hover {
padding-left: 10px;
transition: 1s;
}
The 1 second transition is just for the example, and also you can come up with better css selector for those paragraphs.
#main-footer p{
font-size:16px;
}
#main-footer hr{
margin-top:0;
border-color:#19191d;
}
#main-footer .col-sm-4 p{
line-height: 30px;
margin: 0 !important;
}
#main-footer .col-sm-4 p.address{
padding-left: 28px;
}
#main-footer .container a{
color: #ffffff;
}
#main-footer .container a:hover{
color: #d6c087;
position: static;
}
#main-footer .container a:active, a:visited, a:focus{
text-decoration: none;
}
#main-footer img{
width: 24px !important;
height: 24px !important;
}
.social-links {
list-style:none;
margin:0;
padding:0;
margin-bottom:20px;
}
.social-links li{
display:inline-block;
margin:0 5px;
border-radius:3px;
box-shadow:0 4px 0 transparent;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a {
display:block;
color:#fff;
color:rgba(255,255,255,0.3);
font-size:18px;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background:rgba(0,0,0,0.2);
border-radius:50%;
-webkit-transition:all .3s ease-out;
transition:all .3s ease-out;
}
.social-links li a:hover {
color:#fff;
background:#38A5DB;
}
p:hover {
padding-left: 10px;
transition: 1s;
}
<div class="container">
<hr>
<h4>Tittle</h4>
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><p><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname
</p>
<p class="address">address<br/>
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>

Answer 3

Tittle
<div class="row">
<div class="col-sm-4">
<a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
<p class="address">address
CP City</p></a>
</div>
<div class="col-sm-4">
<a href="" target="_blank"><img src="assets/icons8-google-maps-48.png" alt=""> Prettyname </img>
<p class="address">address
CP City</p></a>
</div>
<div class="col-sm-4 text-right">
<ul class="social-links">
<li class="scrollimation fade-right d4"><i class="fa fa-instagram fa-fw"></i></li>
<li class="scrollimation fade-right d3"><i class="fa fa-facebook fa-fw"></i></li>
</ul>
<p>Footer copyright</p>
</div>
</div>
</div>
If this solves your problem, plz mark it as your answer.