插入主div会导致html中的不平衡

我的html文件中有一个侧栏和导航栏。我只有这些了。我想将我的内容插入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>

---

我通过将侧边栏移到主容器中，然后添加-100%的填充来修复我的问题。然后，我对类内容进行了另一个划分，并将其填充设置为223px（侧边栏的宽度），然后进一步添加填充。如果有人有更好的解决方案，请回答

你能把内容尽量放左和放右吗？在下面找到一个我试过的样本

        <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;
            }

导航包装器
主要内容
边栏
CSS
.导航包装器{
背景色：白色；
颜色：#222；
z指数：9999；
浮动：左；
边缘底部：84px；
}
.包装内容{
浮动：对；
}

我为您的输出创建样式，因此当您在代码中添加样式时，它将按照您的需要工作

<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>

* {
保证金：0；
填充：0；
框大小：边框框；
}
html，正文{
身高：100%；
背景#f2f9；
}
.包装纸{
宽度：100%；
显示：内联块；
}
.侧边栏{
填充顶部：50px；
位置：固定；
宽度：223px；
身高：100%；
背景：#333；
最小宽度：120px；
过渡：0.5s缓进；
z指数：1；
}
.导航包装器{
背景色：白色；
颜色：#222；
}
导航{
z指数：9999；
位置：相对位置；
}
.主要内容{
左侧填充：243px；
显示：内联块；
宽度：100%；
填充顶部：15px；
}

您的答案不符合我的需要，但仍然感谢您的回答，我已经解决了我的问题！

<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>