Bootstrap CSS app container space issue

I am referencing sample angular2 asp application.

Replaced app.html with below to get full size fluid nav bar.

    <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <span class="glyphicon glyphicon-sunglasses"></span>
            </a>
        </div>
        <ul *ngIf="routes != null" class="nav navbar-nav">
            <li *ngFor="#rt of routes" [class.active]="getLinkStyle(rt)">
                <a [routerLink]="[rt.name]">{{rt.name}}</a>
            </li>
        </ul>
    </div>
</nav>
<div class="content padding has-header">
    <router-outlet></router-outlet>
</div>
</nav>

Added below to site.css to avoid overwrite between navbar and container content

 body {
    padding-top: 50px;
    padding-bottom: 20px;
}

There is a similar question here but that did not help.

This is bit difficult to put in fiddle as project structure is very specific to VS15 and may need some changes to _layout.cshtml as I saw in above mentioned post though that did not work.

Trying to render content as full size page