I enclose this question because I have a doubt about something that is happening in my navigation bar and I can't find an answer, I attach a photo and part of the code so you can see for yourself to see if you can give me an idea
My navbar is responsive, the only doubt is that when playing with the browser sizes I find those cases where it is cut off and I try to think of the reason I can't get it out
Thank you very much people I hope you understand the doubt, anything I edit the publication
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>NEU - Nueva Editorial Universitaria</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo-
32x32.webp" />
<link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo-
180x180.webp" />
<link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo-
192x192.webp" />
<link rel="icon" type="image/x-icon" href="assets/img/favicon/cropped-logo-
270x270.webp" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-
icons.css" rel="stylesheet" type="text/css" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?
family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap 5.1)-->
<link href="css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<!-- Font Awesome-->
<link href="/Public/assets/FontaWesome-6.0.0/css/all.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--------------------------------------INICIO BARRA DE NAVEGACIÓN------------------------------------>
<div class="fixed-top" style="background-color: #30408B;">
<div class="container">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #30408B;">
<a class="navbar-brand" href="index.html" title="Inicio">
<img src="/Public/assets/img/logo1.webp" width="250" class="d-inline-block align-top pb-2" alt="Logo NEU">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav">
<li class="nav-item active ms-5"><a class="nav-link" href="#" title="Inicio">INICIO</a></li>
<li class="nav-item ms-5"><a class="nav-link" href="institucional.html" title="Institucional">INSTITUCIONAL </a></li>
<li class="nav-item ms-5"><a class="nav-link" href="subSecretaria.html" title="SubSecretarÍa General">SUBSECRETARÍA</a></li>
<li class="nav-item ms-5"><a class="nav-link" href="catalogo.html" title="Catálogo">CATÁLOGO</a></li>
<li class="nav-item ms-5"><a class="nav-link" href="comercializacion.html" title="Comercialización">COMERCIALIZACIÓN</a></li>
</ul>
<div class=" row col-md-4 col-sm-8 d-flex ms-5">
<div class="col-2 pl-1 pl-2">
<a class="nav-redes" href="https://www.facebook.com/NEU-nueva-editorial-universitaria-347188832343695/" title="Facebook" target="_blank"><i class="bi-facebook fs-3"></i></a>
</div>
<div class="col-2 pl-1 pr-2">
<a class="nav-redes" href="https://twitter.com/NeuUnsl" title="Twitter" target="_blank"><i class="bi-twitter fs-3"></i></a>
</div>
<!--div class="col-4" style="margin: 0 0 0 0;">
<input class="form-control" id="myInput" type="text" placeholder="Buscador">
</div-->
</div>
</div>
</nav>
</div>
</div>
</div>
</body>
</html>
Try adding stilo to the img:
I have changed the src of the logo for testing purposes, see: