Имеется следующий код:
<nav>
<div class="wrapper">
<ul>
<div id="home"><a href="#">Home</a></div>
<div><a href="sale.html">Sale</a></div>
<div><a href="#">Handbag</a></div>
<div><a href="#">Wallets</a></div>
<div><a href="#">Accessories</a></div>
<div><a href="#">Mens Store</a></div>
<div><a href="#">Shoes</a></div>
<div><a href="#">Vintage</a></div>
<div><a href="#">Services</a></div>
<div id="contact_us"><a href="contact.html" target="_blank">Contact us</a></div>
</ul>
</div>
</nav>
* {
margin: 0;
padding: 0;
font-family: Bebas Neue, sans-serif;
font-stretch: condensed;
color: white;
}
.wrapper {
width: 66%;
margin: 0 auto;
}
nav {
background-color: #3bc3b6;
}
nav ul {
display: flex;
display: -webkit-flex;
display: -ms-flex;
flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
-webkit-justify-content: space-between;
list-style-type: none;
text-align: center;
margin: 0 1.4em;
}
nav ul div {
font-size: 1.1em;
padding: 8px 0;
}
nav ul div a {
border-right: 2px solid white;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 0 1.1vw;
}
#home a {
padding-left: 0;
}
#contact_us a {
padding-right: 0;
border-right: none;
}
nav ul div a:hover {
color: #1e90ff;
}
https://codepen.io/anon/pen/MzMYJV
Как сделать динамические padding у пунктов меню в nav (nav ul div a), то есть сжимающиеся при уменьшении окна браузера?