I'm seeking assistance regarding the alignment of content on my webpage. The content is not aligning properly with the sidebar and footer, and I'm unsure how to proceed. The page should have a left margin to avoid touching the sidebar, and the footer should be at the bottom. I will provide an image of the current state of my page. Any help would be greatly appreciated.
* {
box-sizing: border-box;
}
html {
display: block;
}
/* STYLING FOR SCROLL BAR */
body::-webkit-scrollbar {
width: 0.30rem;
}
body::-webkit-scrollbar-track {
background: #212429;
}
body::-webkit-scrollbar-thumb {
background:#fc3218 ;
}
/* SCROLL BAR STYLING ENDS */
.lateral-nav {
position:absolute;top:0;left:0;width:100px;background:#fafafc;height:100vh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;
}
img {
width:60px;height:45px;margin-top:5px;
}
.lateral-nav a {
writing-mode:vertical-lr;text-orientation:mixed;margin:10px 0;}
.navbar {
margin-top:10px;
}
/* NAV BAR STYLING */
.my-nav{
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
}
.navbar-light .navbar-nav .nav-link {
color: white;
}
....
/* Footer styling starts */
....
/* Footer styling ends */
/* Footer End */
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}<link .....
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
....
<footer class="mainfooter" role="contentinfo">
<div class="footer-middle">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Heading 1</h4>
....
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column2-->
....
<!-- Footer Ends -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
....
</body>
</html>