Problemas al colapsar la barra de navegación en Bootstrap

[sesebas]

Hola amigas(os),

Intento desarrollar una app en Angular integrando Bootstrap, pero me he liado con la barra de navegación. Esta se compone de tres partes (y para hacerlo en simple en esta petición de ayuda, sigo el código desde la misma página del bootstrap):

a) Navbar
b) en el div class="collapse navbar-collapse": home,

Lo que pasa es que al cambiar, disminuyendo, el tamaño de la ventana del browser (en app responsive), el div que contiene la barra de navegación aumenta su alto y el form para búsqueda, junto a su botón de imput se posicionan en una segunda linea abajo de los items link de la barra. Gracias por la ayuda que me puedan dar para solucionar esto.

El app.component.html:

Código HTML:

        <div class="row" id="header">

                <div class="col" style="background-color:#ea3030" ></div>

                            <div class="col-lg-8" style="background-color:#ea3030" id="text-header" >

                                    <h1 style="padding-left: 15px;color:white"> {{ title }} </h1>

                            </div>
        
                <div class="col" style="background-color:#ea3030" ></div>

        </div>
        <div class="row">

            <div class="col" style="background-color:rgb(158, 83, 86)" ></div>

                    <div class="col-lg-8" id="navbar-alone">
                            <app-bar-nav></app-bar-nav>
                    </div>

            <div class="col" style="background-color:rgb(158, 83, 86)" ></div>

        </div>

        <div class="row">
                <div id="content" class="col-lg-8 col-center">


                        <section id="main" class="col-lg-12">

                        <!--Componente actual-->
                        <h3>Texto principal</h3>

                        </section>

                        <footer id="footer" class="col-lg-8 col-center">
                        <p>App web para Proyecciones - Sebastián Carrasco</p>
                        </footer>
                </div>
        </div> 

El bar-nav.component.html:

Código HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light">



    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <a class="navbar-brand" href="#">Navbar</a>
  
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0" style="color:white">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown_link</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown" id="Sebas">
            <a class="dropdown-item" href="#">Atributos</a>
            <a class="dropdown-item" href="#">Resúmenes ejecutivos</a>
            <a class="dropdown-item" href="#">Textos Nacionales</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Indicadores Resumen</a> 
          </div>
        </li>
          <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>

          <form class="form-inline my-2 my-lg-0">
              
            <!--  <div class="form-group"> -->
                <input class="form-control mr-sm-2" type="search" placeholder="Texto a buscar..." aria-label="Search">

                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Iniciar</button>
            <!--  </div> -->
                 
            </form>



  </nav> 

El código css:

Código HTML:

.bg-light {
 
    background-color: #9e5356 !important;
 
}
 
.navbar-brand {
    display: inline-block;
    padding-top: .3125rem;
    padding-bottom: .3125rem;
    margin-right: 1rem;
    line-height: inherit;
    white-space: nowrap;
    font-size: 1rem;
    padding-right: 10px;
    padding-left: 10px;
 
}
 
 
a.navbar-brand:hover{
    text-decoration: none;
    background-color: rgb(49, 224, 93); /* Cambia el color de fondo al item seleccionado */
    border-radius: 4px;  /*redondea las esquinas*/
 
 
}
 
#navbarSupportedContent ul li a:hover{
    border-radius: 6px;  /*redondea las esquinas*/
 
    background-color: rgb(49, 224, 93); /* Cambia el color de fondo al item seleccionado */
 
 
}
.navbar-light .navbar-brand {
 
    color: white;
 
}
 
.navbar-expand-lg .navbar-nav .nav-link {
 
    padding-right: .5rem;
    padding-left: .5rem;
 
}
#navbarSupportedContent ul li a{
 
    /*color: white;*/
 
    margin: 0px;
    display: block;
    text-decoration: none;
    color: #FFF;
    padding-left: 10px;
    padding-right: 10px;
    border: 3px solid transparent;
 
}
 
.nav-link{
    padding:0;
}
 

Imágenes:

https://www.amazon.com/clouddrive/sh...if33oHNaPQyuNc