How do I fix the push sidebar menu CSS? - css

Question

I have a problem with a push sidebar menu. When the toggle button is clicked the page goes to the right .The problem is that I want the side bar menu to be next to the page just like the example that is in the picture . Also when i scroll down to the page ,I want the side bar menu to be fixed. I am only using css.
#media (max-width: 575px) {
.navbar-brand {
margin-bottom: 0;
}
.slideout-sidebar {
position: fixed;
top: 0px;
left: -80%;
height: 100%;
background-color: #fff;
transition: all .15s ease-in-out;
-webkit-box-shadow: inset -15px 0px 10px -15px rgba(0, 0, 0, 0.75);
box-shadow: inset -15px 0px 10px -15px rgba(0, 0, 0, 0.75);
}
.slideout-sidebar ul li {
display: block !important;
cursor: pointer;
padding: 10px 10px;
letter-spacing: 1px;
font-weight: 700;
font-size: 15px;
color: #0d6490;
margin: 0;
}
.slideout-sidebar button {
font-size: 1rem !important;
width: 220px;
height: 37px;
}
.navbar-brand {
width: 12rem;
height: 3.2rem;
margin-left: 50px;
}
.container-content {
position: relative;
left: 0px;
}
#menu-toggle {
display: none;
}
.menu-icon {
position: fixed;
top: 5px;
left: 5px;
font-size: 35px;
z-index: 1;
transition: all.15s ease-in-out;
padding: 5px 15px;
background-color: transparent;
}
#menu-toggle:checked ~ .slideout-sidebar {
left: 0;
}
#menu-toggle:checked + .menu-icon {
left: 250px;
}
#menu-toggle:checked ~ .container-content {
-webkit-transform: translateX(80%);
transform: translateX(80%);
transition: all .15s ease-in-out;
}
<input type="checkbox" id="menu-toggle" class="menu-icon" />
<label for="menu-toggle" class="menu-icon"><i class="fa fa-bars mt-2"></i></label>
<div class="container-content">
<header>
<div class="header-container d-flex justify-content-around container-fluid">
<div class="slideout-sidebar order-1">
<ul class="d-md-flex flex-md-column flex-lg-row mt-md-4">
<li class="brd mr-md-2 align-self-center menu">МЕНИ</li>
<li class=" order-lg-last btn-order"> <button class="btn" type="submit">НАРАЧАЈТЕ
ВЕДНАШ</button></li>
<li class="brd border-bottom border-top border-primary d-none ">КОНТАКТИРАЈТЕ НЕ</li>
<li class="brd d-none">УСЛОВИ ЗА КОРИСТЕЊЕ</li>
<li class=" border-bottom border-primary d-none brd">РЕСТОРАНИ</li>
<li class="order-lg-first mr-md-4 text-center brd align-self-center">
<a class="">МК</a>
<div class="d-inline-block
language-line"> | </div>
<a class="">EN</a>
</li>
</ul>
</div>
<div class="mx-auto mx-lg-0 mt-2">
<img src="./images/logo.png" alt="dominoslogo" class="navbar-brand" />
</div>
<div class="cart mt-2">
<img src="images/basket.png" alt="basket" class="d-lg-none">
<span class="header-cart-order d-lg-none">0</span>
</div>
</div>
</header>