I have a sidebar and a navbar in my HTML file. That's all I have. My goal is to insert content into the main-content div, but when I do, it appears like this -
https://i.sstatic.net/YFiFC.png
I want my content to fill up the empty space.
https://i.sstatic.net/dUnnl.png
This is what I am currently using:
<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;
}