Content stuck to navbar - html

Question

Photo of the page
I have my website's content somehow stuck to the navigation menu. I have tried putting it in a different div but nothing has worked for me so far, neither replacing the placing of the container class. I dont understand why the body's main content wont align underneath the navigational menu and be in its own section so that it doesn't leak out. Any help would be greatly appreciated.
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
max-width: calc(100vw - 20px);
min-height: 100vh;
}
body {
width: 100%;
overflow-x: hidden;
}
#container {
min-height: 100%;
position: relative;
width: 100%;
}
main {
margin-left: 100px;
}
/*
html {
display: block;
}
/*
/* SCROLL BAR CSS STARTS */
body::-webkit-scrollbar {
width: 0.30rem;
}
body::-webkit-scrollbar-track {
background: #212429;
}
body::-webkit-scrollbar-thumb {
background: #fc3218;
}
/* SCROLL BAR CSS ENDS */
/* NAV BAR CSS STARTS */
.logo {
margin-right: 5px;
}
.my-nav {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
}
.navbar-light .navbar-nav .nav-link {
color: white;
}
.navbar-nav>li {
padding-left: 35px;
padding-right: 55px;
float: none;
display: table-cell;
text-align: center;
font-size: 14px;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
color: #fc3218;
}
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:active {
color: #fc3218;
}
.navbar {
margin-top: 0px;
margin-left: 10px;
width: 100%;
background: #22252a;
}
.dropdown-menu {
color: white;
background-color: #fc3218;
}
.dropdown-item {
color: white;
font-size: 12px;
}
/* NAV BAR CSS END */
/* SIDEBAR CSS STARTS */
.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: 3px;
}
.lateral-nav a {
writing-mode: vertical-lr;
text-orientation: mixed;
margin: 5px 0;
}
.socialbox {
position: fixed;
display: inline-block;
top: 50%;
left: 0;
width: 80px;
height: auto;
margin: -120px 0 0;
text-align: center;
}
.socialbox img {
display: inline-block;
width: 30px;
height: 30px;
padding: 5px;
margin: 4px;
box-sizing: border-box;
}
.socialbox::before {
content: "#Suivez-nous";
bottom: -180px;
left: -38px;
width: 150px;
font-size: 16px;
font-weight: 800;
letter-spacing: 0;
color: #000f33;
transform: rotate(-90deg);
}
.socialbox::after {
content: "";
bottom: -105px;
left: 50%;
width: 1px;
height: 110px;
margin: 0 0 0 -2px;
background-color: #dddee4;
}
.socialbox::after,
.socialbox::before {
position: absolute;
display: inline-block;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
.socialbox .fa {
font-size: 20px;
color: #000f33;
-webkit-transition: all .4s linear;
transition: all .4s linear;
}
/* SIDEBAR CSS ENDS */
/* CARD DECK START */
.card-deck {
width: 90%;
margin: auto;
}
/* CARD DECK END */
/* Footer start */
footer {
background: #16222A;
background: -webkit-linear-gradient(59deg, #3A6073, #16222A);
background: linear-gradient(59deg, #3A6073, #16222A);
color: white;
width: calc(100% - 85px);
margin-left: 100px;
margin-right: -15px;
}
footer a {
color: #fff;
font-size: 14px;
transition-duration: 0.2s;
}
footer a:hover {
color: #FA944B;
text-decoration: none;
}
.copy {
font-size: 12px;
padding: 10px;
border-top: 1px solid #FFFFFF;
}
.footer-middle {
padding-top: 2em;
color: white;
}
/* Footer social icons */
ul.social-network {
list-style: none;
display: inline;
margin-left: 0 !important;
padding: 0;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
.social-network a.icoFacebook:hover {
background-color: #3B5998;
}
.social-network a.icoLinkedin:hover {
background-color: #007bb7;
}
.social-network a.icoFacebook:hover i,
.social-network a.icoLinkedin:hover i {
color: #fff;
}
.social-network a.socialIcon:hover,
.socialHoverClass {
color: #44BCDD;
}
.social-circle li a {
display: inline-block;
position: relative;
margin: 0 auto 0 auto;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 30px;
height: 30px;
font-size: 15px;
}
.social-circle li i {
margin: 0;
line-height: 30px;
text-align: center;
}
.social-circle li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #595959;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.social-network a {
background-color: #F9F9F9;
}
/* Footer end */
<!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 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/carousel/">
<link rel="stylesheet" href="style1.css">
<link rel="stylesheet" href="normalize.css">
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div id="container">
<!-- Navigation menu -->
<header>
<nav class="my-nav navbar navbar-light navbar-expand-lg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarsExample08"
aria-controls="navbarsExample08" aria-expanded="false" aria- label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-toggle="dropdown" aria- haspopup="true"
aria-expanded="false">ACTIVITES</a>
<div class="dropdown-menu" aria-labelledby="dropdown08">
<a class="dropdown-item" href="#">Rafting</a>
<a class="dropdown-item" href="#">Canooing</a>
<a class="dropdown-item" href="#">Parachute</a>
<a class="dropdown-item" href="#">Soufflerie</a>
<a class="dropdown-item" href="#">Saut elastique</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">OFFRES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">EVENEMENTS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">A PROPOS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ESPACE HANDICAP</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Navigation menu -->
<!-- Sidebar menu -->
<div class="lateral-nav position-fixed">
<img class="logo" src="./img/so.png" alt="">
<div class="socialbox ">
<img class="fa fa-facebook" src="./img/facebook.png" alt="">
<img class="fa fa-twitter" src="./img/twitter.png" alt="">
<img class="fa fa-youtube" src="./img/youtube.png" alt="">
</div>
</div>
<!-- Sidebar menu -->
<!-- Website Content -->
<main>
<section>
<!-- NOS ACTIVITES START -->
<h2 class="text-center">NOS ACTIVITES</h2>
<div class="card-deck ">
<div class="card text-center" style="width: 18rem;">
<div class="card-body rafting">
<h5 class="card-title">RAFTING</h5>
RÉSERVEZ
</div>
</div>
<div class="card text-center" style="width: 18rem; height: 15rem;">
<div class="card-body canooing">
<h5 class="card-title">CANNOING</h5>
RÉSERVEZ
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body parachute">
<h5 class="card-title">PARACHUTE</h5>
RÉSERVEZ
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body soufflerie">
<h5 class="card-title">SOUFFLERIE</h5>
RÉSERVEZ
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body saut-elastique">
<h5 class="card-title">SAUT ELASTIQUE</h5>
RÉSERVEZ
</div>
</div>
</div>
<!-- NOS ACTIVITES END -->
</section>
</main>
</div>
<!-- Footer Start -->
<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>
<ul class="list-unstyled">
<li></li>
<li>Payment Center</li>
<li>Contact Directory</li>
<li>Forms</li>
<li>News and Updates</li>
<li>FAQs</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Heading 2</h4>
<ul class="list-unstyled">
<li>Website Tutorial</li>
<li>Accessibility</li>
<li>Disclaimer</li>
<li>Privacy Policy</li>
<li>FAQs</li>
<li>Webmaster</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6">
<!--Column1-->
<div class="footer-pad">
<h4>Heading 3</h4>
<ul class="list-unstyled">
<li>Parks and Recreation</li>
<li>Public Works</li>
<li>Police Department</li>
<li>Fire</li>
<li>Mayor and City Council</li>
<li>
</li>
</ul>
</div>
</div>
<div class="col-md-3">
<h4>Follow Us</h4>
<ul class="social-network social-circle">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-linkedin"></i></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12 copy">
<p class="text-center">© Copyright 2018 - Company Name. All rights reserved.</p>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Ends -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
</body>
</html>

Answer 1

This is because of the position: absolute on .my-nav element. Just remove that or change it to relative and you should be good

Answer 2

Why do you use position: absolute for the my-nav? What position: absolute or fixed does, it pulls out the element (my-nav) from the document context. If you check this and debug in your browser, you can see that the header has height equal to 0.
In order to fix the card-deck layout, just simply remove the position absolute.
If you want the menu, to be visible when you scroll down the page, consider putting position: sticky on the header.
like:
header {
position: sticky;
top: 0; // need to apply top and left for position sticky to work
left: 0;
z-index: 5; // z-index, so it is at the top
}
.my-nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px;
}

Answer 3

You can add padding to the top of the div which contains the card deck :
.card-deck {
width: 90%;
margin: auto;
padding-top:50px;
}
for the heading to move down edit this part in HTML file:
<h2 style="padding-top:40px;" class="text-center">NOS ACTIVITES</h2>