Angular 5 bootstrap 4

I'm making an application with angle 5 and bootstrap 4, but making the main vertical component complicates everything. This is seen on large screens without problems:

but then when I shrink the screen I get the html of the main component and it stays that way. Between the two div do not cover 100% the width is like the right side of the screen will be reserved the width of the html of the main component even if it is minimized and to the left

the code: '     

    <div id="main" class="col-xs-3 col-sm-3 col-md-3 col-lg-2 col-xl-2" style="margin:0; padding: 0">
        <nav id="navPrincipal" class="navbar navbar-expand-lg bg-inverse" style="margin:0; padding: 0">    
            <button  class="navbar-toggler" type="button" data-toggle="collapse" data-target="#miNavbar" aria-controls="miNavbar" aria-expanded="false" aria-label="Toggle navigation">  
                <i style="color:#4F7EFB" class="fa fa-list" aria-hidden="true"></i>
            </button>
            <div class ="collapse navbar-collapse" id="miNavbar">
                <div class="row">
                    <div  class="col-12" style="text-align: center; height: 15%">
                        <img id="logo" src="/assets/img/logo.svg" align="center" alt="lowidth: 5%;go principal">

                        <hr>
                    </div>
                    <div  class="col-12">                                    
                        <ul class="list-inline">
                            <li class="list-inline-item">
                                <div class="dropdown">
                                    <button class="btn btn-secondary dropdown-toggle" type="button" id="cbProductos" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fa fa-cutlery fa-lg" aria-hidden="true"></i> &nbsp;<label>Productos</label>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="cbProductos" style="background-color: #43485B">
                                        <a class="dropdown-item" href="prod">Buscar productos</a>
                                        <a class="dropdown-item" href="crearProd">Crear productos</a>
                                    </div>
                                </div>
                            </li>
                            <li class="list-inline-item">
                                <a class="nav-link" href="/admin" class="nav-link"><i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i> &nbsp;Carrito</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>  
    </div>

    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-10 col-xl-10">
        <router-outlet></router-outlet>
    </div>

</div>

'