I had problem with a element does not want to take width or even height as 100% I try everything but in inspect tell me that it is always have width 100% and height 100% in inspect and real value i do not know where it come from, I use bootstrap 4 but i do not think that it effect this problem
html as inside navbar element was made by bootstrap I have this and here is code of css that I used with this part of navbar and html and body was already set to height: 100% even min height is 100%.
._nvs{
width: 100px;
height: 80%;
position: fixed;
top: 20%;
left: 0%;
display: block;
}
._a_img{
height: 100%;
width: 100%;
}
._n{
height: 100%;
}
.hm-20{
height: 25%;
}
.hm-20 div{
height: 100%;
position: relative;
}
.hm-20 div a{
width:100%;
height: 100%!important;
}
<div class="collapse navbar-collapse _nvs bg-dark" id="collapsibleNavbar">
<ul class="nav navbar-nav flex-column _n">
<li class="nav__item hm-20">
<div class="container ">
<a href="#1" class="nav__link c-blue _a_img " ><img class="align-items-center" src="img/home-icon.png" alt=""></a>
</div>
</li>
<li class="nav__item hm-20">
<div class="container">
<a href="#2" class="nav__link c-yellow _a_img" ><img src="img/about-icon.png" alt=""></a>
</div>
</li>
<li class="nav__item hm-20">
<div class="container">
<a href="#3" class="nav__link c-red _a_img" ><img src="img/projects-icon.png" alt=""></a>
</div>
</li>
<li class="nav__item hm-20">
<div class="container">
<a href="#4" class="nav__link c-green _a_img" ><img src="img/contact-icon.png" alt=""></a>
<div style="clear:both"></div>
</div>
</li>
</ul>
</div>
I want just to control width and height of element a even I can not change by set it as 100 px it does not work.