Я пока только практикуюсь), проблема такая:
При фокусировке ссылки она меняет стиль, добавляется бордер с падингом 5 px.
Когда бордер появляется то падинг 5 px добавляется к отступам между ссылками и двигает соседнюю ссылку.
Как можно это исправить?
box-sizing: border-box не помогает.
HTML:
</head>
<body>
<header id="header">
<div class="main">
<img class="logo" src="img/logo.png" width="112" height="19"/>
<nav class="menu">
<ul>
<li><a href="#>Hello</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
CSS:
* {
padding: 0;
margin: 0;
}
body {
font-family: "Open sans", sans-serif;
}
header {
background-image: url(img/fon1.png);
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
color: #ffffff;
}
.main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.logo {
max-width: 100%;
height: auto;
padding-top: 47px;
padding-left: 98px;
}
nav {
}
.menu ul {
display: flex;
padding-right: 99px;
padding-top: 48px;
list-style-type: none;
}
.menu li {
margin-left: 15px;
}
.menu a{
font-family: "Open Sans", sans-serif;
color: #ffffff;
font-size: 16px;
font-weight: 400;
text-decoration: none;
}
.menu a:hover {
color: #ff0000;
}
.menu a:focus {
border: 1px solid #ffffff;
border-radius: 30px;
padding: 5px;
color: #ffffff;
}
.menu a:active {
color: #ffffff;
}
