php blade allign extended layout side by side

I'm trying to build a responsive dashboard, using a sidebar for navigation on the right, I built the sidebar as a layout and extended it in the dashboard page, by dividing the page into Grids using Bootstrap 4 but the result I keep getting is as you can see in the screenshot, I'm not sure why the divs behave like this.

https://imgur.com/a/GIWWb8y

and inspecting view source is here : https://imgur.com/a/SaeeMfi

the sidebar code is

        <li>
            <a href="#"><i class="fas fa-sliders-h"></i>Clients</a>
        </li>
        <li>
            <a href="#"><i class="fas fa-address-book"></i>Services</a>
        </li>
        <li>
            <a href="#"><i class="fas fa-cog"></i>Settings</a>
        </li>
        <li>
            <a href="#"><i class="fas fa-stream"></i>Features</a>
        </li>
        <li>
            <a href="#"><i class="fas fa-user"></i>About us</a>
        </li>
        <li>
            <a href="#"><i class="fas fa-globe-asia"></i>Languages</a>
        </li>
        <li>
            <a href="#"><i class="fas fa-envelope"></i>Contact us</a>
        </li>
    </ul>
</nav>

and the CSS for it

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } .wrapper{

height: 100%;
width: 45%;
position: relative;
display: flex;

} .wrapper .menu-btn{ position: absolute; left: 20px; top: 10px; background: #4a4a4a; color: #fff; height: 45px; width: 45px; z-index: 9999; border: 1px solid #333; border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } #btn:checked ~ .menu-btn{ left: 247px; } .wrapper .menu-btn i{ position: absolute; transform: none; font-size: 23px; transition: all 0.3s ease; } .wrapper .menu-btn i.fa-times{ opacity: 0; } #btn:checked ~ .menu-btn i.fa-times{ opacity: 1; transform: rotate(-180deg); } #btn:checked ~ .menu-btn i.fa-bars{ opacity: 0; transform: rotate(180deg); } #sidebar{ position: absolute; background: #404040; height: 100%; width: 270px; overflow: hidden; left: -270px; transition: all 0.3s ease; } #btn:checked ~ #sidebar{ left: 0; } #sidebar .title{ line-height: 65px; text-align: center; background: #333; font-size: 25px; font-weight: 600; color: #f2f2f2; border-bottom: 1px solid #222; } #sidebar .list-items{ position: relative; background: #404040; width: 100%; height: 100%; list-style: none; /text-align: justify;/ /line-height: 0;/ } #sidebar .list-items li{ padding-left: 40px; line-height: 50px; border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid #333; transition: all 0.3s ease; position: relative;

} #sidebar .list-items li:hover{ border-top: 1px solid transparent; border-bottom: 1px solid transparent; box-shadow: 0 0 10px 3px #222; } #sidebar .list-items li:first-child{ border-top: none; } #sidebar .list-items li a{ color: #f2f2f2; text-decoration: none; font-size: 18px; font-weight: 500; /height: 100%;/ width: 100%; display: block; } #sidebar .list-items li a i{ margin-right: 20px; } #sidebar .list-items .icons{ width: 100%; height: 40px; text-align: center; position: absolute; bottom: 100px; line-height: 40px; display: flex; align-items: center; justify-content: center; } #sidebar .list-items .icons a{ height: 100%; width: 40px; display: block; margin: 0 5px; font-size: 18px; color: #f2f2f2; background: #4a4a4a; border-radius: 5px; border: 1px solid #383838; transition: all 0.3s ease; } #sidebar .list-items .icons a:hover{ background: #404040; } .list-items .icons a:first-child{ margin-left: 0; } .content{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #202020; z-index: -1; width: 100%; text-align: center; } .content .header{ font-size: 45px; font-weight: 700; } .content p{ font-size: 40px; font-weight: 700; }

the main dashboard that I'm extending the layout to it

<div class="row">
    <div class="col-md-6">
    @extends('layouts.adminNavbar')
    </div> 
    <div class="col-md-6">
        <div class="class container-fluid">
            <form action="action_page.php">
                <div class="container">
                    <h1>Register</h1>
                    <p>Please fill in this form to create an account.</p>
                    <hr>

                    <label for="email"><b>Email</b></label>
                    <input type="text" placeholder="Enter Email" name="email" id="email" required>

                    <label for="psw"><b>Password</b></label>
                    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>

                    <label for="psw-repeat"><b>Repeat Password</b></label>
                    <input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>
                    <hr>

                    <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
                    <button type="submit" class="registerbtn">Register</button>
                </div>

                <div class="container signin">
                    <p>Already have an account? <a href="#">Sign in</a>.</p>
                </div>
            </form>
        </div>
    </div>
</div>

I have been trying to fix issue for over 5 days