the class side-nav fixed not working correctly

Start your code here

<!-- Sidebar navigation -->
<divid="slide-out"class="side-nav fixed">
<ulclass="custom-scrollbar list-unstyled">
<!-- Logo -->
<li>
<divclass="logo-wrapper waves-light">
<ahref="#">
<imgsrc="https://mdbootstrap.com/img/logo/mdb-transparent.png"class="img-fluid flex-center">
</a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ulclass="social">
<li>
<ahref="#"class="icons-sm fb-ic">
<iclass="fa fa-facebook"></i>
</a>
</li>
<li>
<ahref="#"class="icons-sm pin-ic">
<iclass="fa fa-pinterest"></i>
</a>
</li>
<li>
<ahref="#"class="icons-sm gplus-ic">
<iclass="fa fa-google-plus"></i>
</a>
</li>
<li>
<ahref="#"class="icons-sm tw-ic">
<iclass="fa fa-twitter"></i>
</a>
</li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<formclass="search-form"role="search">
<divclass="md-form my-0 waves-light">
<inputtype="text"class="form-control py-2"placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ulclass="collapsible collapsible-accordion">
<li>
<aclass="collapsible-header waves-effect arrow-r">
<iclass="fa fa-chevron-right"></i> Submit blog
<iclass="fa fa-angle-down rotate-icon"></i>
</a>
<divclass="collapsible-body">
<ul>
<li>
<ahref="#"class="waves-effect">Submit listing</a>
</li>
<li>
<ahref="#"class="waves-effect">Registration form</a>
</li>
</ul>
</div>
</li>
<li>
<aclass="collapsible-header waves-effect arrow-r">
<iclass="fa fa-hand-pointer-o"></i> Instruction
<iclass="fa fa-angle-down rotate-icon"></i>
</a>
<divclass="collapsible-body">
<ul>
<li>
<ahref="#"class="waves-effect">For bloggers</a>
</li>
<li>
<ahref="#"class="waves-effect">For authors</a>
</li>
</ul>
</div>
</li>
<li>
<aclass="collapsible-header waves-effect arrow-r">
<iclass="fa fa-eye"></i> About
<iclass="fa fa-angle-down rotate-icon"></i>
</a>
<divclass="collapsible-body">
<ul>
<li>
<ahref="#"class="waves-effect">Introduction</a>
</li>
<li>
<ahref="#"class="waves-effect">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li>
<aclass="collapsible-header waves-effect arrow-r">
<iclass="fa fa-envelope-o"></i> Contact me
<iclass="fa fa-angle-down rotate-icon"></i>
</a>
<divclass="collapsible-body">
<ul>
<li>
<ahref="#"class="waves-effect">FAQ</a>
</li>
<li>
<ahref="#"class="waves-effect">Write a message</a>
</li>
<li>
<ahref="#"class="waves-effect">FAQ</a>
</li>
<li>
<ahref="#"class="waves-effect">Write a message</a>
</li>
<li>
<ahref="#"class="waves-effect">FAQ</a>
</li>
<li>
<ahref="#"class="waves-effect">Write a message</a>
</li>
<li>
<ahref="#"class="waves-effect">FAQ</a>
</li>
<li>
<ahref="#"class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
</div>
<!--/. Sidebar navigation -->