каким способом правильно было бы сделать эту линию под текстом?Я сделал просто релатив блок.Но при адаптиве такой хаос происходит,может я совершаю ошибку? xD
<nav class="navtabs">
<ul class="list">
<li class="list__item ">
<a href="" class="list__item--link active">What is CBD?</a>
</li>
<li class="list__item">
<a href="" class="list__item--link">Benefits</a>
</li>
<li class="list__item">
<a href="" class="list__item--link">Our difference</a>
</li>
<div class="line"></div>
</ul>
</nav>
<div class="under__line"></div>
.list {
margin: 0;
padding: 0;
}
.list__item {
display: inline-block;
list-style: none;
margin-right: 10px;
font-size: 30px;
}
.list__item--link {
padding: 2px 5px;
text-decoration: none;
list-style-type: none;
color: #1c1c1b;
}
.list__item--link:hover {
color:#1c1c1b;
text-decoration: none;
list-style-type: none;
}
.list .line {
position: absolute;
width: 20px;
left: 0;
height:2px;
background: #1c1c1b;
}
.list .active {
color: #1c1c1b;
}
.navtabs{
font-family: 'Oswald', sans-serif;
text-align: center;
padding-top: 150px;
}
.list__item:first-child{
}
.list__item:not(:first-child){
padding-left: 100px;
}
.list__item a{
text-transform: uppercase;
letter-spacing: 4px;
}
.list{
margin: 0 auto;
}
.under__line{
margin: 0 auto;
top:1px;
right:4px;
position:relative;
width: 840px;
height: 2px;
background-color:#ced6af;
}
