Вставка в основной div вызывает дисбаланс в html

Question

В моем файле html есть боковая панель и панель навигации. Это все, что у меня есть. Я хотел вставить свой контент в основной контент div. Но когда я вставляю что-нибудь в div основного контента. Это выглядит так -

Я хочу, чтобы мой контент отображался в пустом месте.

Что я здесь использую.

<div class="wrapper">
    <nav>
        <div class="nav-wrapper">
            <ul>
                <li>...</li>
                <li>...</li>
            </ul>
        </div>
    </nav>
    <div class="sidebar">
        <ul>
            <li>...</li>
            <li>
                <ul>
                    <li>...</li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="main-content">
         <!--Main Content Here-->
    </div>
</div>

.sidebar{
    padding-top: 84px;
    position: fixed;
    width: 223px;
    height: 100%;
    background: #333;
    min-width: 120px;
    transition: 0.5s ease-in;
}
.nav-wrapper{
    background-color: white;
    color: #222;
    z-index: 9999;
}

Answer 1

Я создаю стиль для вашего вывода, поэтому, когда вы добавляете стиль в свой код, он будет работать так, как вы хотите.

<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    height: 100%;
    background: #f2f2f9;
}
.wrapper {
    width: 100%;
    display: inline-block;
}
.sidebar {
    padding-top: 50px;
    position: fixed;
    width: 223px;
    height: 100%;
    background: #333;
    min-width: 120px;
    transition: 0.5s ease-in;
    z-index: 1;
}
.nav-wrapper{
    background-color: white;
    color: #222;
}
nav {
    z-index: 9999;
    position: relative;
}
.main-content {
    padding-left: 243px;
    display: inline-block;
    width: 100%;
    padding-top: 15px;
}
</style>

Answer 2

Не могли бы вы попробовать оставить содержимое слева и справа? Найдите ниже образец, который я попробовал

        <div class="wrapper">
                <nav>
                    <div class="nav-wrapper">
                        Nav Wrapper
                    </div>
                    <div class="wrapper-content">
                        <!--Main Content Here-->
                        Main Content
                    </div>
                </nav>
                <div class="sidebar">
                    SideBar
                </div>
            </div>

CSS
        .nav-wrapper {
                    background-color: white;
                    color: #222;
                    z-index: 9999;
                    float: left;
                    margin-bottom: 84px;
                }
    .wrapper-content {
                float: right;
            }

Answer 3

Я исправил свою проблему, переместив боковую панель в основной контейнер, а затем добавив отступ -100%. Затем я сделал еще одно деление с содержимым класса и установил его отступ в 223 пикселя (ширина боковой панели) и добавил отступ. Если у кого-то есть лучшее решение, пожалуйста, ответьте!