I have a router outlet in a component. The child component doesn't take the whole width. I tried to give to the child's div width:100%, min-width:100%, also with !important, but it's not working. How can I force the child's div to take the whole width available? Parent HTML:

<div fxLayout="column" fxLayoutAlign="space-between stretch">
    <div>
          ...
    </div>

    <div fxLayout="row" fxFlexFill>
        <div class="navbar" fxLayout="column">
        </div>
        <div class="mainDiv" fxFlex>
            <router-outlet></router-outlet>
        </div>
    </div>

    <div fxLayoutAlign="end"></div>
</div>

Parent CSS:

.navbar {
    padding-top: 40px;
    padding-right: 80px;
    border-top: none;
}

.mainDiv {
    width: 100%;
    border-top: none;
}

Child CSS:

<div class="container">...</div>