Как уменьшить отступ у блока?
Хочу чтобы блок с footer-logo и footer-content были расположены не далеко друг от друга, но при сдвиге блока footer-content панель с соц сетями сдвигается
.footer{
padding-top: 59px;
padding-bottom: 40px;
background: #D10000;
width: 100%;
}
.footer-container{
width: 1180px;
margin: 0 auto;
max-width: 100%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.footer-left{
display: block;
}
.footer-phone{
margin: 12px 0 0;
font-size: 20px;
line-height: 28px;
color: #fff;
font-weight: 700;
padding-left: 22px;
}
.phone-footer{
margin: 5px 0 0;
margin-top: -10px;
}
.phone-footer a{
color: #fff;
}
ul.menu {
position: absolute;
left: 18%;
margin-top: 15px;
transform: translate(-50%, -50%);
list-style-type: none;
padding: 0;
}
ul.menu li {
display: inline-block;
margin: 10px;
}
ul.menu li a i.fa {
display: inline-block;
height: 30px;
width: 30px;
text-align: center;
line-height: 30px;
border-radius: 40px;
align-items: center;
position: relative;
transition: all ease 0.2s;
}
ul.menu li a i.fa::after {
content: "";
position: absolute;
top: 1;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 100%;
width: 100%;
z-index: -1;
border-radius: 40px;
background-color: #F6B300;
}
ul.menu li a i.fa:hover {
color: #fff;
font-size: 18px;
}
ul.menu li a i.fa:hover::after {
animation: animate ease 0.6s forwards;
}
ul.menu li a i.fa-facebook:hover::after {
background-color: #3b5998;
}
ul.menu li a i.fa-vk:hover::after {
background-color: #00aced;
}
ul.menu li a i.fa-instagram:hover::after {
background-color: #8a3ab9;
}
@keyframes animate {
0%, 20% {
transform: scale(1);
border-radius: 40px;
background-color: #fff;;
}
30% {
transform: scale(1.2);
}
40% {
transform: scale(1.1);
}
50% {
transform: scale(1);
border-radius: 10px;
}
60%, 100% {
transform: scale(1);
border-radius: 5px;
}
}
.footer-right{
display: flex;
justify-content: space-around;
margin-left: 40px;
}
.footer-akcii{
display: flex;
margin-top: -35px;
margin-right: 860px;
position: relative;
}
.footer-link{
color: #fff;
font-size: 18px;
line-height: 31px;
color: #fff;
font-weight: 700;
}
.footer-link:hover{
text-decoration: underline;
text-underline-position: under;
}
.footer-shop{
position: absolute;
display: flex;
margin-right: 100px;
}
.content{
display: flex;
flex-direction: column;
margin-left: 15px;
}
.content1{
display: flex;
flex-direction: column;
margin-top: -15px;
}
<div class="footer">
<div class="footer-container">
<div class="footer-left">
<a href="#" class="footer-logo">
<img src="img/astfooter.svg">
</a>
<div class="phone-footer">
<a href="tel:+77479009999" class="footer-phone"> +7 747 900 99 99 </a>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="menu">
<li><a target="_blank" href="https://www.facebook.com/Astykzhan.astana"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" href="https://vk.com/astykzhankostgroup"><i class="fa fa-vk"></i></a></li>
<li><a target="_blank" href="https://www.instagram.com/astykzhan/?hl=ru"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
</div>
<div class="footer-right">
<div class="foot-content">
<div><a href="#" class="footer-link"> Акции</a></div>
<div><a href="#" class="footer-link"> Поставщикам</a></div>
</div> `
<div class="foot-content1">
<div><a href="#" class="footer-link"> О нас</a></div>
<div><a href="#" class="footer-link"> Поставщикам</a></div>
<div><a href="#" class="footer-link"> Юрлицам</a></div>
</div> `
<div class="foot-content2">
<div><a href="#" class="footer-link"> Оплата</a></div>
<div><a href="#" class="footer-link"> Бонусы</a></div>
<div><a href="#" class="footer-link"> Доставка и возврат</a></div>
</div>
</div>
</div>
</div>