Сделал меню и задал для него ховер, в результате блок с телефоном скатился вниз, как вернуть его на место?
<section id="header" class="clearfix">
<div class="container">
<div class="wrapper">
<div class="wrapper__logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="wrapper__navbar">
<ul class="wrapper__menu">
<li>
<a href="#">
Инфраструктура
</a>
</li>
<li>
<a href="#">
Планировки и цены
</a>
</li>
<li>
<a href="#">
Материалы и отделка
</a>
</li>
<li>
<a href="#">
Документы
</a>
</li>
<li>
<a href="#">
Контакты
</a>
</li>
</ul>
</div>
<div class="wrapper__phone">
<p>+7 (495) 544-23-12</p>
<a href="#">
Заказать звонок
</a>
</div>
</div>
</div>
</section>
*{
box-sizing: border-box;
}
body{
font-family: 'Roboto Slab', serif;
padding: 0px;
margin: 0px;
}
.clearfix:after {
content:'';
display: table;
width: 100%;
}
.container{
width: 1230px;
margin: 0 auto;
}
#header{
background: #fff;
color: #000;
}
.wrapper__logo{
padding-top: 11px;
float: left;
margin-right: 51px;
}
.wrapper__navbar{
padding: 0px;
margin: 0px;
}
.wrapper__menu li{
float: left;
margin: 42px 0px 0px 0px;
display: block;
}
.wrapper__menu a {
color: #000;
font-weight: bold;
text-decoration: none;
padding: 8px 11px;
border-radius: 3px;
}
.wrapper__menu a:hover{
background: #f7f2fe;
}
.wrapper__phone{
position: relative;
bottom: 30px;
font-weight: bold;
font-size: 21px;
float: right;
color: #2f1059;
}
.wrapper__phone a {
margin-top: 12px;
float: right;
border: 1px solid #2f1059;
border-radius: 7px;
text-decoration: none;
font-weight: bold;
font-size: 14px;
color: #2f1059;
padding: 12px 4px 13px 30px;
}
.wrapper__phone a:before{
content: "\f095";
font-family: "FontAwesome";
position: absolute;
right: 130px;
color: #2f1059;
font-size: 14px;
}