кнопки не видны в адаптивном макете

Question

Кнопки не видны в адаптивном макете. В адаптивном макете -

@ media (min-width: 320px) и (max-width: 480px) {

}

@ media (min-width: 481px)) и (максимальная ширина: 767 пикселей) {

}

Я не могу видеть кнопки «Регистрация» и «Вход».

app.component.html

<header class="topbar" [attr.data-navbarbg]="options.navbarbg" style="    background: #f07800;">
    <nav class="navbar top-navbar navbar-expand-md"
        [ngClass]="(options.navbarbg=='skin6')?'navbar-light':'navbar-dark'">
        <!-- ============================================================== -->
        <!-- [attr.data-navbarbg]="options.navbarbg" -->
        <div class="navbar-collapse collapse" id="navbarSupportedContent" style="background:#f07800;"
            [ngbCollapse]="!isCollapsed">

            <app-navigation (toggleSidebar)="toggleSidebarType()" class="w-100"></app-navigation>
            <div (mouseover)="changeColorSignUp=true" (mouseout)="changeColorSignUp=false" style="width:11%">
                <span *ngIf="!changeColorSignUp"> <a [href]="signUpPath"
                        style="color:#0B3C6D;margin-right:2%;font-weight:bold;font-size:125%;">Register</a> </span>
                <span *ngIf="changeColorSignUp"> <a [href]="signUpPath"
                        style="color:white;margin-right:2%;font-weight:bold;font-size:125%;">Register</a> </span>
            </div>
            <div style="margin-right:3%">
                <div (mouseover)="changeColor=true" (mouseout)="changeColor=false">
                    <span *ngIf="!changeColor"> <a [href]="loginPath"
                            style="color:#0B3C6D;font-weight:bold;margin-right: 2%;font-size: 125%;">Login</a> </span>
                    <span *ngIf="changeColor"> <a [href]="loginPath"
                            style="color:white;font-weight:bold;margin-right: 2%;font-size: 125%;">Login</a> </span>
                </div>
            </div>
        </div>
    </nav>
</header>
<div class="container">

    <!-- == CMS MainContent (BEGIN) == -->
    <div class="MainContent">
        <div class="section">
            <div class="title">
                &nbsp;</div>
            <div class="row">
                <div class="col-md-4 col-sm-6" id="mainDiv1Css" >
                    <div class="card_home wow zoomIn" id="card1Css" >
                       //code
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>