Всем привет, столкнулся с проблемой в корректировке кнопок меню на сайте.
CMS сайта собственная, фреймворки CSS не использую. Вся конструкция находится в с высотой 3vw. Когда просматриваю при ширине 1000px и более, всё идёт как нужно, но если меньше, то кнопки выходят за границы хеадера. В чём проблема?
<div id="bar">
<nav>
<ul>
<li><a href="/login">Войти</a></li>
<li><a href="/register">Регистрация</a></li>
</ul>
</nav>
</div>
#bar {
float: right;
}
#bar nav {
padding: 0.4vw 1vw;
}
#bar ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
#bar li {
display: inline-block; /*один из способов разместить элементы в строку*/
margin: auto;
padding: auto;
}
#bar a {
margin-right: 0.5vw!important;
margin: auto;
color: black;
padding: 0.4vw 1.3vw;
text-decoration: none;
font-weight: bold;
display: inline-block;
font-size: 1.35vw;
font-family: blick;
min-width: 13%;
transition: 0.3s;
box-shadow: 0px 1px 2px black;
border-radius: 0.7vw;
background: white;
}
#bar a:hover {
color: white;
background: orange;
}
Простой
