Develop Reference

Jquery toggle class open and close problem

I'm trying to make open close menu for responsive size. I hide the menu with this code
left: -50%;
but when I try to open it with this code it doesn't work.
#left-side.active {
left: 60%;
}
Here is my jQuery toggle code:
function toggleLeftSideBar() {
document.getElementById('#left-side').classList.toggle('active');
}
This is my complete code:
$("#accordion h3").click(function() {
$(this).toggleClass('open');
$(this).parent().siblings().find('h3').removeClass('open');
$("#accordion ul ul").slideUp("fast");
if (!$(this).next().is(":visible")) {
$(this).next().slideDown("fast");
}
})
function toggleLeftSideBar() {
document.getElementById('#left-side').classList.toggle('active');
}
* {
box-sizing: border-box;
}
body {
font-family: 'Raleway', sans-serif;
height: 100%;
background-color: #f5f7f8;
}
h1 {
text-align: center;
padding: 0.6em 1em;
font-size: 1.4em;
background-color: #31363b;
display: inline-block;
width: 20%;
position: fixed;
}
h1>a {
text-decoration: none;
color: #202326;
;
transition: all 1s ease-in-out;
font-weight: 900;
}
h1:hover>a {
text-decoration: none;
color: #aaa;
;
}
#h1-span {
font-weight: bold;
display: inline;
}
/* Left Side */
#left-side {
height: 100%;
width: 20%;
background-color: #2a2f33;
position: fixed;
display: flex;
overflow-x: hidden;
top: 44px;
left: 0;
}
/*Logo section*/
.logo-ul {
width: 6%;
background-color: #2a2f33;
}
.logo-li {
padding: 0.5em;
}
.img-logo {
width: 40px;
height: 40px;
opacity: 0.4;
transition: all 1s ease;
}
.img-logo:hover {
opacity: 1;
}
.notification-span {
font-size: 10px !important;
border-radius: 5px;
border: 1px solid green;
margin-left: 8px;
padding: 1px 12px;
}
/*Accordion Menu*/
#accordion {
width: 100%;
background-color: #393d42;
color: #fff;
}
#accordion h3 {
text-transform: uppercase;
font-size: 11px;
line-height: 30px;
padding: 10px 10px;
cursor: pointer;
transition: all .2s linear;
}
#accordion h3:hover {
background-color: #f55661;
}
#accordion h3:hover i {
color: #fff;
}
/* links */
#accordion ul ul li a {
color: white;
display: block;
font-size: 11px;
line-height: 27px;
padding: 0 15px;
text-decoration: none;
transition: all .1s;
}
/* hover effect */
#accordion ul ul li a:hover {
color: #f55661;
}
/* hide non-actives by default */
#accordion ul ul {
display: none;
list-style-type: disc;
padding: 1.8em;
background: #32363a
}
#accordion ul ul:first-child {
background: #32363a;
}
/* #accordion li.active ul{
display:block;
}*/
/* Icon font styles */
#accordion h3 span {
font-size: 16px;
padding-right: 10px;
}
.left-icon i {
color: #f55661;
}
.open {
background-color: #f55661;
}
.open i {
color: white;
}
/* Right Side */
#right-side {
margin-left: 20%;
width: 75%;
padding: 10px;
}
.right-image {
display: flex;
justify-content: flex-end;
width: 100%;
}
.right-image img {
width: 3em;
height: 3em;
border-radius: 50%;
}
.rightside-ul {
display: flex;
margin: 1em;
}
.rightside-li {
margin: 1em;
font-size: .8em;
}
.rightside-li>a {
text-decoration: none;
}
/*Card Area*/
.card-area {
display: flex;
flex-wrap: wrap;
}
/*Card Component*/
.card {
padding: 1em;
}
h4 {
color: #959595;
font-size: 22px;
margin-left: 1em;
}
.right-icon i {
color: #fff;
}
.card-component {
display: flex;
padding: 1em;
}
.content-area {
padding: 1em;
background-color: #fff;
border-radius: 5px;
display: flex;
flex-direction: column;
align-content: center;
}
.statusbar {
min-width: 1.5em;
background-color: green;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
}
.content-nav {
display: flex;
}
.content-area p {
width: 300px;
text-align: left;
align-items: center;
margin-bottom: 1em;
}
.content-ul {
display: flex;
padding-bottom: 2em;
margin-left: 4em;
}
.content-ul li {
display: flex;
}
.content-ul li a {
text-decoration: none;
margin-right: 1em;
}
.img-container {
width: 300px;
height: 200px;
margin: 0 auto;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-footer-ul {
display: flex;
justify-content: space-around;
margin-top: 1em;
}
.card-footer-ul li a {
text-decoration: none;
}
.reaction-span {
color: #acacac;
}
/* RESPONSİVE */
#media screen and (max-width: 988px) {
body {
font-size: .8em;
}
#left-side {
min-width: 230px;
left: -50%;
/*This hides the menu to left*/
}
#right-size {
margin-left: 10%;
width: 70%;
padding: 6px;
}
h1 {
font-size: 1.2em;
min-width: 230px;
padding: 1em;
display: none;
}
#accordion h3 {
font-size: .7em;
}
#left-side.active {
left: 60%;
}
.leftsidebarButton {
position: absolute;
left: 5%;
top: 20px;
cursor: pointer;
}
.leftsidebarButton::before {
content: "\f0c9";
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
font-size: 2.2em;
position: absolute;
padding: 5px;
}
}
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#100;200;300;400;500;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/eb6e3d525a.js" crossorigin="anonymous"></script>
<div id="wrap-page">
<h1><span id=h1-span>sociality</span>.io</h1>
<section id="left-side" onclick="toggleLeftSideBar()">
<div id="logo" class="active">
<ul class="logo-ul">
<li class="logo-li">
<img class="img-logo" src="images/instagramlogo.png" alt="instagram-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/twitterlogo.png" alt="twitter-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/pinterestlogo.png" alt="pinterest-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/linkedinlogo.png" alt="linkedin-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/youtubelogo.png" alt="youtube-logo">
</li>
<li class="logo-li">
<img class="img-logo" src="images/facebooklogo.png" alt="facebook-logo">
</li>
</ul>
</div>
<div id="accordion">
<ul>
<li class="active">
<h3><span class="left-icon icon-dashboard"><i class="far fa-bell"></i></span>Notifications<span class="notification-span">29</span></h3>
</li>
<li>
<h3 class="tooltip"><span class="left-icon icon-coffee"><i class="fab fa-slideshare"></i></span>Summary </h3>
<ul class>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="fas fa-edit "></i></span>Publish</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="far fa-comments "></i></span>Engage</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="fas fa-volume-up "></i></span>Listen</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
<li>
<h3><span class="left-icon icon-cloud "><i class="fas fa-chart-line "></i></span>Report</h3>
<ul>
<li class="accordion-li ">Lorem</li>
<li class="accordion-li ">Ipsum</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="leftsidebarButton "></div>
</section>
<section id="right-side ">
<ul style="list-style: disc; " class="rightside-ul ">
<li style="color:#acacac " class="rightside-li ">
<span style="color:black ">Published</span>
</li>
<li style="color:#3ac183 " class="rightside-li ">
<span style="color:black ">Scheduled</span>
</li>
<li style="color:#f7bf38; white-space: nowrap; " class="rightside-li ">
<span style="color:black ">Need Approval</span>
</li>
<li style="color:#fb6450 " class="rightside-li ">
<span style="color:black ">Error</span>
</li>
<li style="color:#67b1f2 " class="rightside-li ">
<span style="color:black ">Notes</span>
</li>
<div class="right-image ">
<img src="images/fakefacegenerator.jpg " alt="profileimage ">
</div>
</ul>
<h4>14 January 2016</h4>
<!--Card Components -->
<div class="card-area ">
<div class="card ">
<div class="card-component ">
<div style="background-color: #3ac183; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-facebook-f "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="fas fa-ban "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/icecream1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-comment "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-component ">
<div style="background-color: #f7bf38; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-twitter "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="fas fa-check "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/icecream2.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-retweet "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
<h4>12 January 2016</h4>
<!--Card Components -->
<div class="card-area ">
<div class="card ">
<div class="card-component ">
<div style="background-color: #acacac; " class="statusbar ">
<span class="right-icon "><i class="fab fa-facebook-f "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/dog1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-comment "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-component ">
<div style="background-color: #acacac; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-twitter "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/dog1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-retweet "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card ">
<div class="card-component ">
<div style="background-color: #acacac; " class="statusbar ">
<span class="right-icon "> <i class="fab fa-instagram "></i> </span>
</div>
<div class="content-area ">
<div class="content-nav ">
<h5>14 January 2016 - 14:30</h5>
<ul class="content-ul ">
<li> <span class="reaction-span "> <i class="far fa-trash-alt "></i> </span>
</li>
<li> <span class="reaction-span "> <i class="fas fa-info-circle "></i> </span>
</li>
</ul>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quo sit asperiores? </p>
<div class="img-container ">
<img src="images/dog1.jpg " alt="icecream1 ">
</div>
<div class="card-footer-nav ">
<ul class="card-footer-ul ">
<li>
<span class="reaction-span "><i class="far fa-thumbs-up "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-comment "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="fas fa-share-alt "></i></span> 0
</li>
<li>
<span class="reaction-span "><i class="far fa-eye "></i></span> 0
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>

I Will Provide an easier method u can follow to hide and show sidebar
$('.toggle').click(function() {
$('.sidebar').toggleClass('active');
});
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
overflow-x: hidden;
margin: 0;
padding: 0;
}
.d-flex {
display: flex;
height: 100%;
}
.sidebar {
width: 300px;
background-color: blueviolet;
transition: width 500ms ease-out;
}
.main {
width: 100%;
background-color: cyan;
}
.sidebar.active {
width: 0;
}
<script src="https://code.jquery.com/jquery-3.6.0.js " integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin=" anonymous "></script>
<div class="d-flex">
<div class="sidebar">f</div>
<div class="main">
<a class="toggle" href="javascript:void(0)">toggle</a>
</div>
</div>

HTML elements move when I zoom in/out

I have a problem with my website, I mean when I zoom in, the logo image and the vision image moves, even the container which contains the description moves and the date also moves to the left as shown in the figure below:
I don't want the elements to move when I zoom in or out. I want the elements to be in the same position how can I do that?
here my HTML code:
body
{
background-color:#F6F2F2;
font-family: Calibri;
background-size:cover;
}
hr
{
opacity: 25%;
}
.navbar {
background-color: #ffffff !important;
border-color: #ffffff;
}
.square
{
height: 100px;
width: 120px;
background-color: white;
border: 1px solid #bdbdbd;
margin-right: 900px;
}
.square_section
{
height: 100px;
width: 130px;
background-color: white;
border: 1px solid #bdbdbd;
margin-left: 140px;
margin-top: -98px;
}
.square_events
{
height: 100px;
width: 120px;
background-color: white;
border: 1px solid #bdbdbd;
margin-left: 140px;
margin-top: -98px;
}
.square_adv
{
height: 100px;
width: 120px;
background-color: white;
border: 1px solid #bdbdbd;
margin-left: 280px;
margin-top: -98px;
}
.square_user
{
height: 100px;
width: 130px;
background-color: white;
border: 1px solid #bdbdbd;
margin-left: 290px;
margin-top: -98px;
}
.square_vision
{
border-color: white;
height: 100px;
width: 130px;
background-color: white;
margin-left: -398px;
margin-top: -100px;
}
.vl {
border-left: 1px solid #c2c2c2;
height: 100px;
margin-left: 25px;
margin-top: -100px;
opacity: 10px;
}
#media (min-width: 992px){
.dropdown-menu .dropdown-toggle:after{
border-top: .3em solid transparent;
border-right: .3em solid;
border-bottom: .3em solid transparent;
}
.dropdown-menu .dropdown-menu{
margin-left:0; margin-right: 0;
direction: rtl;
}
.nav-link
{
margin-top: -22px;
direction: rtl;
}
.dropdown-menu li{
position: relative;
direction: rtl;
}
.nav-item .submenu{
display: none;
position: absolute;
right:100%; top:-7px;
}
.nav-item .submenu-left{
right:100%; left:auto;
}
.dropdown-menu > li:hover{ background-color: #f1f1f1;
}
.dropdown-menu > li:hover > .submenu{
display: block;
direction: rtl;
}
}
.btn
{
direction: rtl;
margin-left: -95px !important;
margin-right: -80px;
margin-bottom: -80px;
margin-top: -11px;
width: 120px;
background-color: white;
border-color: white;
color: black;
}
#logout
{
margin-left: 50px;
margin-top: 14px;
}
#sections
{
margin-left: 44px;
margin-top: 10px;
}
#mes_logout
{
margin-left: 20px;
margin-top: 10px;
}
#user_welcome
{
margin-left: 35px;
margin-top: 14px;
}
#mes_welcome
{
margin-left: 60px;
margin-top: 5px;
}
#vision_img
{
height: 100px;
width: 130px;
margin-top: 3px;
margin-left: 25px;
}
#logo_img
{
height: 100px;
width: 110px;
margin-left: -10px;
margin-right: 10px;
margin-top: -100px;
}
#events
{
margin-left: 30px;
margin-top: 15px;
}
#description_img
{
margin-left: -150px;
margin-top: 25px;
height: 180px;
width: 860px !important;
}
#section_img_list
{
margin-left: 790px;
margin-top: 10px;
}
#text_sections
{
text-align: right;
font-weight: bold;
margin-top: -30px;
margin-right: 70px;
}
#calnder_img
{
margin-left: 160px;
margin-top: 10px;
}
#date_message
{
margin-left: 110px;
margin-top: -20px;
}
.container {
position: relative;
text-align: center;
color:black;
width: 100%;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.quotes {
display: none;
text-align: center;
margin-left: -150px;
color: black;
}
.rectangle {
height: 190px;
width: 850px;
background-color: rgb(255, 255, 255);
margin-left: 190px;
margin-top: 20px;
}
.rectangle_second
{
height: 190px;
width: 850px;
background-color: rgb(255, 255, 255);
margin-left: 190px;
margin-top: 30px;
}
.footer {
position: absolute;
left: 0;
bottom: 20%;
width: 100%;
background-color:#002060;
color: white;
text-align: center;
font-weight: bold;
margin-bottom: -375px;
padding: 6px;
}
.date_time
{
height: 220px;
width: 200px;
background-color: rgb(255, 255, 255);
margin-left: 1100px;
margin-top: -600px;
color: white;
font-weight: bold;
}
.date
{
height: 60px;
width: 200px;
background-color: #002060;
}
.movie-img {
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 35px;
margin-top: -2px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
#quaality_img
{
height:110px;width: 110px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 20px;
}
#relations_img
{
height:110px;width: 110px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 25px;
}
#quaality_msg
{
margin-right: 15px;
font-size: 12px;
}
#user_adv
{
margin-left: 30px;
margin-top: 5px;
}
#mes_adv
{
margin-left: 30px;
margin-top: 10px;
}
.carousel-control-prev-icon
{
background-color: #1F419E;
color: #1F419E;
transform: translateX(33.333%);
}
.carousel-control-next-icon
{
background-color: #1F419E;
color: #1F419E;
margin-left:38px;
}
.movie-img1
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 155px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img2
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 280px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img3
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 400px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img4
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 530px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img5
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 660px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img6
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 35px;
margin-top: 2px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img7
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 155px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img8
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 280px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img9
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 400px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img10
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 530px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
.movie-img11
{
height:100px;width: 100px;background-color: rgb(255, 255, 255);
background-repeat:no-repeat;
background-size: cover;
object-fit: fill;
margin-right: 660px;
margin-top: -99px;
border: 1px solid #d6d6d6;
opacity: 200%;
box-shadow: #e2e2e2;
}
#book_img
{
margin-right: 25px;
}
#day
{
color: #002060;
font-size: 30px;
text-align: right;
margin-right: 80px;
margin-top: 25px;
}
#months
{
color: #002060;
font-size: 30px;
text-align: right;
margin-right: 75px;
margin-top: -15px !important;
}
#year
{
color: #002060;
font-size: 30px;
text-align: right;
margin-right: 75px;
margin-top: -15px !important;
}
.time
{
height: 40px;
width: 200px;
background-color: #002060;
margin-left: 1100px;
margin-top: 20px;
color: white;
}
#clock
{
text-align: center;
margin-left: 45px;
margin-top: 5px;
font-weight: bold;
font-size:112%;
letter-spacing: 2px;
position: absolute;
}
#library_img
{
margin-right: 20px;
}
#library_msg
{
margin-right: 10px;
font-size: 12px;
}
#trainee_img
{
margin-right: 25px;
position:absolute;
margin-top: 5px !important;
}
#trainee_msg
{
margin-right: 20px;
margin-top: 64px;
font-size: 12px;
}
#it_img
{
margin-right: 25px;
position:absolute;
margin-top: 5px !important;
}
#it_msg
{
margin-right: 20px;
margin-top: 60px;
font-size: 12px;
}
.position
{
margin-left: 300px;
margin-top: -90px;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="Style.css" type="text/css">
<link rel="icon" href="img/logo.png">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> -->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<title>home</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(1090)
.delay(1090)
.fadeOut(1090, showNextQuote);
}
showNextQuote();
})();
</script>
<script type="text/javascript">
$(document).ready(function() {
// jQuery code
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
if ($(window).width() < 992) {
$('.dropdown-menu a').click(function(e){
e.preventDefault();
if($(this).next('.submenu').length){
$(this).next('.submenu').toggle();
}
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
})
});
}
}); // jquery end
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-light bg-light"> <!-- start navbar -->
<div class="container-fluid"> <!-- start div container-fluid-->
<img id="img" src="img/image.png" alt="img">
<div class="position">
<div class="square">
<img id="logout" src="img/logout.png" alt="logout">
<p id="mes_logout"> </p>
</div>
<div class="square_section"> <!-- start div square section-->
<img id="sections" src="img/sections.png" alt="sections">
<div class="btn-group">
<li class="nav-item dropdown">
<a class="btn btn-secondary btn-sm dropdown-toggle" href="#" data-toggle="dropdown"> </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
</ul>
</li>
</div>
</div>
<div class="square_user">
<img id="user_welcome" src="img/user (1).png" alt="logout">
<p id="mes_welcome"></p>
</div>
</div>
<div class="square_vision">
<img id="vision_img" src="img/Saudi_Vision_2030_logo.svg.png" alt="logout">
</div>
<div class="vl"></div>
<img id="logo_img" src="img/logo.png" alt="logo">
</div>
</nav>
<div class="container">
<img id="description_img" src="img/Capture.png" alt="Snow" style="width:80%;">
<div class="centered">
<h5 class="quotes">
</h5>
<h5 class="quotes">
</h5>
<h5 class="quotes">
</h5>
</div>
</div>
<div class="rectangle">
<img id ="section_img_list" src="img/section.png" alt="section">
<p id="text_sections"></p>
<hr>
<div dir="rtl" class="row mx-auto my-auto"> <!-- start div carousel -->
<div dir="rtl" id="recipeCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false"> <!-- start div carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img1">
<a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img2">
<a id="quaality_img" href="#"><img src="img/customer-service.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img3">
<a id="book_img" href="#"><img src="img/books-stack-of-three.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img4">
<a id="it_img" href="#"><img src="img/data.png" class="img-fluid"></a>
<p id="it_msg"> </p>
</div>
<div class="movie-img5">
<a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img1">
<a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img2">
<a id="relations_img" href="#"><img src="img/call-center-agent.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img3">
<a id="relations_img" href="#"><img src="img/student-in-the-library.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img4">
<a id="relations_img" href="#"><img src="img/boss.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img5">
<a id="relations_img" href="#"><img src="img/debt.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="movie-img6">
<a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img7">
<a id="book_img" href="#"><img src="img/gift.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img8">
<a id="book_img" href="#"><img src="img/homework.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img9">
<a id="book_img" href="#"><img src="img/parchment.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img10">
<a id="library_img" href="#"><img src="img/library.png" class="img-fluid"></a>
<p id="library_msg"> </p>
</div>
<div class="movie-img11">
<a id="trainee_img" href="#"><img src="img/presentation.png" class="img-fluid"></a>
<p id="trainee_msg"> </p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
<div class="rectangle_second">
<img id ="section_img_list" src="img/advertising.png" alt="section">
<p id="text_sections"></p>
<hr>
<div dir="rtl" class="row mx-auto my-auto">
<div dir="rtl" id="recipeCarousel1" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="book_img" href="#"><img src="img/data.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="movie-card m-1">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel1" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel1" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="date_time">
<div class="date">
<img id="calnder_img" src="img/calenda.png" alt="calnder">
<p id="date_message"></p>
<p id="day"></p>
<p id="months"></p>
<p id="year"></p>
</div>
</div>
<div class="time">
<p id="clock"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

I just put it inside a wrap, and it worked:
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="Style.css" type="text/css">
<link rel="icon" href="img/logo.png">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> -->
<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.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<title>home</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function() {
var quotes = $(".quotes");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(1090)
.delay(1090)
.fadeOut(1090, showNextQuote);
}
showNextQuote();
})();
</script>
<script type="text/javascript">
$(document).ready(function() {
// jQuery code
$(document).on('click', '.dropdown-menu', function (e) {
e.stopPropagation();
});
if ($(window).width() < 992) {
$('.dropdown-menu a').click(function(e){
e.preventDefault();
if($(this).next('.submenu').length){
$(this).next('.submenu').toggle();
}
$('.dropdown').on('hide.bs.dropdown', function () {
$(this).find('.submenu').hide();
})
});
}
}); // jquery end
</script>
</head>
<body>
<header>
<nav class="navbar navbar-default navbar-light bg-light"> <!-- start navbar -->
<div class="container-fluid"> <!-- start div container-fluid-->
<img id="img" src="img/image.png" alt="img">
<div class="position">
<div class="square">
<img id="logout" src="img/logout.png" alt="logout">
<p id="mes_logout"> </p>
</div>
<div class="square_section"> <!-- start div square section-->
<img id="sections" src="img/sections.png" alt="sections">
<div class="btn-group">
<li class="nav-item dropdown">
<a class="btn btn-secondary btn-sm dropdown-toggle" href="#" data-toggle="dropdown"> </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
<li><a class="dropdown-item dropdown-toggle" href="#"> </a>
<ul class="submenu dropdown-menu">
<li><a class="dropdown-item" href=""> </a></li>
<li><a class="dropdown-item" href=""> </a></li>
</ul>
</li>
</ul>
</li>
</div>
</div>
<div class="square_user">
<img id="user_welcome" src="img/user (1).png" alt="logout">
<p id="mes_welcome"></p>
</div>
</div>
<div class="square_vision">
<img id="vision_img" src="img/Saudi_Vision_2030_logo.svg.png" alt="logout">
</div>
<div class="vl"></div>
<img id="logo_img" src="img/logo.png" alt="logo">
</div>
</nav>
</header>
<div id="wrap">
<div class="container">
<img id="description_img" src="img/Capture.png" alt="Snow" style="width:80%;">
<div class="centered">
<h5 class="quotes">
</h5>
<h5 class="quotes">
</h5>
<h5 class="quotes">
</h5>
</div>
</div>
<div class="rectangle">
<img id ="section_img_list" src="img/section.png" alt="section">
<p id="text_sections"></p>
<hr>
<div dir="rtl" class="row mx-auto my-auto"> <!-- start div carousel -->
<div dir="rtl" id="recipeCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false"> <!-- start div carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img1">
<a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img2">
<a id="quaality_img" href="#"><img src="img/customer-service.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img3">
<a id="book_img" href="#"><img src="img/books-stack-of-three.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img4">
<a id="it_img" href="#"><img src="img/data.png" class="img-fluid"></a>
<p id="it_msg"> </p>
</div>
<div class="movie-img5">
<a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="quaality_img" href="#"><img src="img/quality-assurance.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img1">
<a id="relations_img" href="#"><img src="img/relations.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img2">
<a id="relations_img" href="#"><img src="img/call-center-agent.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img3">
<a id="relations_img" href="#"><img src="img/student-in-the-library.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img4">
<a id="relations_img" href="#"><img src="img/boss.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img5">
<a id="relations_img" href="#"><img src="img/debt.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="movie-img6">
<a id="book_img" href="#"><img src="img/briefcase.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img7">
<a id="book_img" href="#"><img src="img/gift.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img8">
<a id="book_img" href="#"><img src="img/homework.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img9">
<a id="book_img" href="#"><img src="img/parchment.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
<div class="movie-img10">
<a id="library_img" href="#"><img src="img/library.png" class="img-fluid"></a>
<p id="library_msg"> </p>
</div>
<div class="movie-img11">
<a id="trainee_img" href="#"><img src="img/presentation.png" class="img-fluid"></a>
<p id="trainee_msg"> </p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
<div class="rectangle_second">
<img id ="section_img_list" src="img/advertising.png" alt="section">
<p id="text_sections"></p>
<hr>
<div dir="rtl" class="row mx-auto my-auto">
<div dir="rtl" id="recipeCarousel1" class="carousel slide" data-bs-ride="carousel" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="col-lg-2 col-sm-4">
<div class="movie-card m-1">
<div class="movie-img">
<a id="book_img" href="#"><img src="img/data.png" class="img-fluid"></a>
<p id="quaality_msg"> </p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="movie-card m-1">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#recipeCarousel1" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next " type="button" data-bs-target="#recipeCarousel1" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
</div>
</div>
<div class="footer">
</div>
<div class="date_time">
<div class="date">
<img id="calnder_img" src="img/calenda.png" alt="calnder">
<p id="date_message"></p>
<p id="day"></p>
<p id="months"></p>
<p id="year"></p>
</div>
</div>
<div class="time">
<p id="clock"></p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
CSS:
#wrap{
width:1325px;
}

make arrow icon appear when input category menu is checked CSS3

I having some inconveniences to make a font-awesome icon appear when the input is checked.
It is for a portfolio gallery section, and I've added the icon inside the label, so the goal is that when I select the category menu, that shows a border-bottom and the icon pointing down.
So far, I just could make the border work, but I can't get this icon showing up.
I've already try with the opacity but I'am not sure if I am using the input selector as I should.
It should work to all the categories in the same way.
Could someone tell me if this can be done?
I appreciate any help on this.
body {
margin: auto;
background: #F2F5E9;
width: 100%;
font-family: "Arial"
}
.containergallery {
text-align: center;
margin-top: 30px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 8% 2% 5%;
flex-wrap: wrap;
}
ul.gallery li {
list-style-type: none;
margin-top: 40px;
opacity: 1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
label {
position: relative;
text-align: center;
font-family: 'robotoregular', sans-serif;
cursor: pointer;
color: #fff;
background: #cccccc;
padding: 0.5%;
overflow: hidden;
}
input[type="radio"]:checked+label {
background: #22b0b4;
border-bottom: 4px solid #000;
}
.fa-caret-down {
position: absolute;
left: 45%;
top: 75%;
color: #000;
font-size: 26px;
opacity: 0;
}
/*menu rounded corners*/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="containergallery">
<input type="radio" id="select-all" name="button" onclick="myFunction()">
<label for="select-all" class="label-all">
<i class="fas fa-caret-down"></i>
All works
</label>
<input type="radio" id="select-creative" name="button">
<label for="select-creative" class="label-creative">
Creative
</label>
<input type="radio" id="select-corporate" name="button">
<label for="select-corporate" class="label-corporate">
Corporate
</label>
<input type="radio" id="select-portfolio" name="button">
<label for="select-portfolio" class="label-portfolio">
Portfolio
</label>
<ul class="gallery">
<li class="creative-item">
<img src="01.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="02.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="03.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="04.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="05.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="06.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="07.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="08.jpg" />
<div class="overlay">
<div class="text"><p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
</ul>
</div>
</body>
</html>

You need to add this css code :
input[type="radio"]:checked+label i {
opacity: 1;
}
This will set the opacity of the icon to 1 when the corresponding radio button is checked
body {
margin: auto;
background: #F2F5E9;
width: 100%;
font-family: "Arial"
}
.containergallery {
text-align: center;
margin-top: 30px;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 0 8% 2% 5%;
flex-wrap: wrap;
}
ul.gallery li {
list-style-type: none;
margin-top: 40px;
opacity: 1;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}
label {
position: relative;
text-align: center;
font-family: 'robotoregular', sans-serif;
cursor: pointer;
color: #fff;
background: #cccccc;
padding: 0.5%;
overflow: hidden;
}
input[type="radio"]:checked+label {
background: #22b0b4;
border-bottom: 4px solid #000;
}
.fa-caret-down {
position: absolute;
left: 45%;
top: 75%;
color: #000;
font-size: 26px;
opacity: 0;
}
input[type="radio"]:checked+label i {
opacity: 1;
}
/*menu rounded corners*/
.label-all {
border-radius: 3px 0 0 3px;
}
.label-portfolio {
border-radius: 0 3px 3px 0;
}
input {
display: none;
}
img {
display: block;
width: 300px;
height: auto;
}
li {
position: relative;
width: 300px;
}
/*Overlay effect for photos*/
li:hover .overlay,
.container:hover .fa-eye {
opacity: 1;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
width: 100%;
transition: .5s ease;
opacity: 0;
height: 35%;
}
.text {
color: #f1f1f1;
font-size: 14px;
text-align: left;
padding: 0 5px 5px 10px;
line-height: 1.6;
}
.fa-eye {
position: absolute;
right: 5px;
top: -26px;
color: #fff;
border: 2px solid #fff;
border-radius: 100%;
background-color: #22b0b4;
padding: 15px;
overflow: visible;
}
/*Select Categorie*/
input#select-creative:checked~.gallery li:not(.creative-item),
input#select-corporate:checked~.gallery li:not(.corporate-item),
input#select-portfolio:checked~.gallery li:not(.portfolio-item) {
opacity: 0.1;
}
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet" />
<div class="containergallery">
<input type="radio" id="select-all" name="button" onclick="myFunction()">
<label for="select-all" class="label-all">
<i class="fas fa-caret-down"></i>
All works
</label>
<input type="radio" id="select-creative" name="button">
<label for="select-creative" class="label-creative">
<i class="fas fa-caret-down"></i>
Creative
</label>
<input type="radio" id="select-corporate" name="button">
<label for="select-corporate" class="label-corporate">
<i class="fas fa-caret-down"></i>
Corporate
</label>
<input type="radio" id="select-portfolio" name="button">
<label for="select-portfolio" class="label-portfolio">
<i class="fas fa-caret-down"></i>
Portfolio
</label>
<ul class="gallery">
<li class="creative-item">
<img src="01.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="02.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="03.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="creative-item">
<img src="04.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="05.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="06.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="portfolio-item">
<img src="07.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
<li class="corporate-item">
<img src="08.jpg" />
<div class="overlay">
<div class="text">
<p><b>My Name is John</b><br> description image bref</p>
</div>
<i class="fas fa-eye"></i>
</div>
</li>
</ul>
</div>

Animating sidemenu on hover

I want to show only the icons as default and on hover slide the sidemenu to the current state you see in the jsfiddle
Thanks in advance
https://jsfiddle.net/aq9Laaew/228/
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>

You can do it by changing navbars values on hover like this:
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 65px;
height: 100vh;
background: #2c2c2c;
transition:1s;
}
#sidebar:hover{
width: 259px;
}
#sidebar:hover .sidebar-item span{
opacity:1;
}
.sidebar-item {
padding: 10px 20px;
border-left: 5px solid transparent;
}
.sidebar-item span{
opacity:0;
transition:1s;
}
.sidebar-active {
border-left: 5px solid #b1a0ff;
color: #b1a0ff;
background: #474747;
}
.sidebar-item a {
align-items: center;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>

So from the comments this wasn't exactly what you were after but I put this together and might as well share it here anyway.
It animates the label in on hover using relative position and CSS transition. It does involve some changes to the HTML.
https://jsfiddle.net/Chipmo/111dd0sj/1/
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 259px;
height: 100vh;
background: #2c2c2c;
}
.sidebar-item {
padding-top: 20px;
}
.sidebar-item a {
align-items: center;
}
.sidebar-item i {}
.sidebar-left-cover {
background: #2c2c2c;
width: 40px;
height: 100%;
z-index: 2;
padding-left: 20px;
}
.sidebar-item .sidebar-label {
position: relative;
right: 100px;
transition: right 0.5s;
z-index: 1;
}
.sidebar-item:hover .sidebar-label {
right: -5px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i></div>
<span class="sidebar-label">Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
</div>
<span class="sidebar-label">Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i></div>
<span class="sidebar-label">Messages</span>
</a>
</div>
</div>
</div>
</div>

Custom menu using jQuery and CSS

I'm trying to create a sidebar menu, but I am not sure really where to start.
How I need it to work is in the image below, when the main nav link 1 is clicked, it will slide in the sub nav items from the right that are associated to that selection. Obviously main nav link 2 will have it's own options too and link 3 could have no sub nav items.
Thanks in advance for any assistance!
Here's what I have so far:
$(".primary-nav .box").click(function(e) {
e.preventDefault();
$('.primary-nav').addClass('hidden-xs-up')
$('.secondary-nav').removeClass('hidden-xs-up');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').addClass('hidden-xs-up');
$('.primary-nav').removeClass('hidden-xs-up');
});
.sidebar {
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav hidden-xs-up">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
</div>
</div>
</div>
</div>
https://jsfiddle.net/fj4Lou7w/

Based on your code and whitout change your markup I have a few suggestions to make simpler your slide-in animation:
Use position absolute for the secondary navs.
Use a class and transition to make the slide animation.
Use a reference from your primary buttons to target the right secondary element.
$(".primary-nav .box").click(function(e) {
e.preventDefault();
var targ = $(this).attr('href');
$(targ).addClass('showsub');
});
$(".back-btn").click(function(e) {
e.preventDefault();
$('.secondary-nav').removeClass('showsub');
});
.sidebar {
position:relative;
background-color: #434a54;
height: 500px;
width: 120px;
margin: 60px auto;
overflow:hidden;
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.2);
}
.sidebar .box {
color: #aab2bd;
display: block;
text-align: center;
border-bottom: 1px solid #656d78;
padding: 20px 10px;
text-decoration: none !important;
transition: .2s;
}
.sidebar .box:hover {
background-color: #4a89dc;
color: #f5f7fa;
}
.sidebar .nav-icon {
font-size: 30px;
display: block;
margin-bottom: 5px;
}
.sidebar .back-btn {
background-color: #4a89dc;
color: #f5f7fa;
}
.secondary-nav {
position:absolute;
z-index:10;
left:100%;
top:0;
width:100%;
background-color: #434a54;
transition:left .2s linear;
}
.secondary-nav.showsub {
left:0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="sidebar">
<div class="primary-nav">
<a href="#sec1" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary1
</a>
<a href="#sec2" class="box">
<i class="fa fa-id-card nav-icon" aria-hidden="true"></i> Primary2
</a>
<a href="#" class="box">
More <i class="fa fa-ellipsis-h" aria-hidden="true"></i>
</a>
</div>
<div class="secondary-nav" id="sec1">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary
</a>
</div>
<div class="secondary-nav" id="sec2">
<a href="#" class="box back-btn">
<i class="fa fa-arrow-left" aria-hidden="true"></i> Back
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
<a href="#" class="box">
<i class="fa fa-address-book nav-icon" aria-hidden="true"></i> Secondary2
</a>
</div>
</div>
</div>
</div>
</div>

it is not the best solution, but on hover you can hide, move,... elements in the DOM with CSS like:
[
body {
font-family: Arial;
padding: 40px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
position: relative;
width: 60px;
}
ul.submenu {
opacity: 0;
position: absolute;
top: 0;
left: 120px;
transition: all 400ms ease-in-out;
}
ul li {
border-top: 1px solid white;
}
ul li a {
display: block;
background-color: #434a54;
text-align: center;
color: white;
text-decoration: none;
padding: 20px 0;
}
ul li:hover .submenu {
opacity: 1;
left: 61px;
}
<ul class="mainmenu">
<li>
Menu1
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</li>
<li>Menu2
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu3
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
<li>Menu4
<ul class="submenu">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul></li>
</ul>