Hola tengo la siguiente navbar en html y css
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<img src="{{ asset('images/logo/l-1.png') }}" alt="Logo" class="navbar-logo"> WebMy
</a>
<button class="navbar-toggler navbar-toggler-right" type="button"
data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">¿Quienes somos?</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">Nuestro Servicio</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#portfolio">Road Map</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contactanos</a>
</li>
</ul>
</div>
</div>
</nav>
Mi problema viene cuando a la hora de utilizar el hiperenlace el "espacio de click" no coincide como deberia adjunto foto donde se ve el raton haciendo click fuera de las letras y el logo (Las letras se ponen en negro al poner el raton encima)
Por ultimo adjunto el codigo css aunque le he hecho varias modificacion intentando solucionar el problema (paddin, margin, height, weight, etc...)
/*navbar*/
.navbar-light {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: rgba(0,0,0,.7);
}
.navbar-brand.js-scroll-trigger {
padding-right: 500px;
}
.navbar-light .container a, .navbar-light .container .collapse .navbar-nav .nav-item .nav-link{
color: var(--primary-font-color1);
white-space: nowrap;
}
.navbar-logo{
width: 40%;
height: 40%;
}
/*navbar*/
Tambien podeis descargar el proyecto de laravel completo desde este enlace de github por si os falta algun tipo de dato, igualmente estoy pendiente a cualquier respuesta, gracias de antemano