How to pin content to a menu?

Question

css

When scaling the screen, the right side of the site (content) slides either to the left or to the right. How to pin content to a menu?
You can see an example of how it looks here and here .

<div id="container">
    <div id="sidenav-menu">
        <app-sidenav-menu></app-sidenav-menu>
    </div>
    <div id="content">
        <router-outlet></router-outlet>
    </div>
</div>

#container {
    width: 100%;
    height: 100%;
}

#sidenav-menu {
    position: fixed;
    left: 0%;
    width: 25%;
}

#content {
    width: 75%;
    position: fixed;
    left: 300px;
    right: 0%;
    height: 100%;

}

Answer 1

#container {
    width: 100%;
    height: 100%;
}

#sidenav-menu {
    position: fixed;
    left: 0%;
    width: 25%;
}

#content {
    width: 75%;
    position: fixed;
    left: 300px; <--убрат
    right: 0%;
    height: 100%;

}

https://jsfiddle.net/hpgnjpbh/4/