Как сделать, чтобы блоки не «плясали» при анимации увеличения текста?
* {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #fff;
}
body {
background-color: #DEDEDE;
}
.wrapper {
position: relative;
outline: 1px solid red;
margin: 0 auto;
width: 1200px;
min-height: 800px;
background-color: #A1A1A1;
}
.header {
width: 100%;
height: 85px;
background-color: #3641E7;
}
.nav {
height: 20px;
padding: 10px;
text-align: center;
}
li {
outline: 1px solid red;
margin: 10px;
width: 100px;
height: 25px;
list-style-type: none;
display: inline-block;
}
a {
font-size: 16px;
}
a:hover {
font-size: 18px;
}
<!DOCTYPE html>
<html>
<head>
<title>Practic-2</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="practic2.css">
<link rel="stylesheet" type="text/css" href="practic2-media-query.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<nav class="nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Сообщество</a></li>
<li><a href="#">Помощь</a></li>
</ul>
</nav>
</header>
</body>
</html>