Inserting into main div causes unbalance in html - html

Question

I have a sidebar & a navbar in my html file. That's all I have. I wanted to insert my content into the div main-content. But when I insert anything into the main-content div. It appears like this -
I want my content to appear on the empty space.
What I am using here.
<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

I make style for your output so when you add the style in your code it will work like you want.
<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

I fixed my problem by shifting my sidebar into a main-container and then adding a padding of -100%. Then i made another division with class content and set its padding to 223px (the width of the sidebar) and adding padding further. If anyone has a better solution please answer!

Answer 3

Could you try as left the content as left & right? Find below a sample i tried
<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;
}