Что происходит с верхним меню и как это исправить?
Сайт для просмотра. Может быть еще какие-то советы по исправлению этой верстки?
<div class="nav scale_nav">
<a href="index.html">
<div class="nav__item">
Главная
</div>
</a>
<a href="about.html">
<div class="nav__item">
Об ассоциации
</div>
</a>
<a href="info.html">
<div class="nav__item">
Информация обязательная<br>для размещения
</div>
</a>
<a href="reestr.html">
<div class="nav__item">
Реестр членов
</div>
</a>
<a href="contacts.html">
<div class="nav__item">
Контакты
</div>
</a>
<button class="nav__button-popup" onclick="openbox('box')">
<b>Бесплатная<br>консультация</b>
</button>
</div>
body {
background-color: #f7f7f7;
font-family: 'Arsenal', sans-serif;
margin:auto;
overflow-x: auto;
width: 1550px;
overflow-x:hidden;
}
.nav__item {
display: flex;
align-items: center;
height: 65px;
background-color: #eeeeee;
margin-right: 5px;
padding-left: 15%;
padding-right: 15%;
transition-duration: 0.3s;
cursor: pointer;
font-size: 20px;
color: #666464;
font-family: 'Arsenal', sans-serif;
line-height: 22px;
text-align: center;
white-space: nowrap;
}
.nav__item:hover {
background-color: #ffffff;
}
.nav {
width: 100%;
display: flex;
justify-content: center;
}
.nav__item a {
text-decoration: none;
}
.nav__button-popup {
position: relative;
display: inline-block;
font-family: ;
line-height: 1.2;
font-size: .9375rem;
width: 10.375rem;
padding: .6875rem 0 .6875rem 1.8125rem;
color: #404040;
border: .125rem solid #b62f1b;
cursor: pointer;
background-color: transparent;
text-align: left;
transition: color .2s ease,border .2s linear;
margin-left: 20px;
}
.nav__button-popup:hover {
color: #b62f1b;
}
.nav__button-popup:hover::before {
bottom: 1.9625rem;
top: 1.9625rem;
}
.nav__button-popup:hover::after {
bottom: 1.9625rem;
top: 1.9625rem;
}
.nav__button-popup::before, .nav__button-popup::after{
content: "";
position: absolute;
background: #f7f7f7;
width: .25rem;
bottom: 1.0625rem;
top: 1.0625rem;
transition: all .5s ease;
}
.nav__button-popup::after {
right: -.1875rem;
}
.nav__button-popup:before {
left: -.1875rem;