<div class="wrapper">
<ul class="menu">
<li><a href="#">Shop</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Shipping</a></li>
<li><a href="#">Discount</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
.wrapper {
width: 100%;
max-width: 700px;
background: #cfd6d2;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
padding-bottom: 10px
}
.menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.menu li {
text-align: center;
flex-grow: 1;
position: relative;
border-right: 1px #000 solid;
}
.menu li:last-child {
border-right: none;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.