Slider images are not within section

1

Please check the code as there is something wrong with the slider section. I want the slider section to be within the section tag so that it doesnt overflow.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Shoppo.com</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>

<body>
<div class="top-nav-bar">
	
	<div class="search-box">
		<i class="fa fa-bars" id="menu-btn" onclick="openmenu()"></i>
		<i class="fa fa-times" id="close-btn" onclick="closemenu()"></i>
		<img src="img/logo.png" class="logo">
		<input type="text" class="form-control">
		<span class="input-group-text"><i class="fas fa-search"></i></span>
	</div>
	<div class="menubar">
		<ul>
			<li><a href="">Cart</a></li>
			<li><a href="">Sign Up</a></li>
			<li><a href="">Login</a></li>
		</ul>
	</div>
</div>

<section class="header">
	<div class="side-menu" id="side-menu">
		<ul>
			<li>Makeup<span> ></span>
			<ul>
				<li>Foundation</li>
				<li>Highlighter</li>
				<li>Concealer</li>
			</ul>
			</li>
			<li>Skincare <span> ></span>
			<ul>
				<li>Facial kit</li>
				<li>Scrub</li>
				<li>Cleanser</li>
			</ul>
			</li>
			<li>Hair <span> ></span>
			<ul>
				<li>Hair Serum</li>
				<li>Shampoo</li>
				<li>Conditioner</li>
			</ul>	
			</li>
			<li>Lips <span> ></span>
			<ul>
				<li>Lip Balm</li>
				<li>Lip Plumper</li>
				<li>LipStick</li>
			</ul>
			</li>
			<li>Brands <span> ></span>
			<ul>
				<li>Loreal</li>
				<li>Lakme</li>
				<li>Biotique</li>
			</ul>
			</li>
			<li>Sale <span> ></span>
			<ul>
				<li>10% on Revlon kit</li>
				<li>1On1 offer</li>
				<li>30% Flat Sale</li>
			</ul>
			</li>
				<li>Brands <span> ></span>
			<ul>
				<li>Loreal</li>
				<li>Lakme</li>
				<li>Biotique</li>
			</ul>
			</li>
			<li>Sale <span> ></span>
			<ul>
				<li>10% on Revlon kit</li>
				<li>1On1 offer</li>
				<li>30% Flat Sale</li>
			</ul>
			</li>
				<li>Brands <span> ></span>
			<ul>
				<li>Loreal</li>
				<li>Lakme</li>
				<li>Biotique</li>
			</ul>
			</li>
			<li>Sale <span> ></span>
			<ul>
				<li>10% on Revlon kit</li>
				<li>1On1 offer</li>
				<li>30% Flat Sale</li>
			</ul>
			</li>
				<li>Brands <span> ></span>
			<ul>
				<li>Loreal</li>
				<li>Lakme</li>
				<li>Biotique</li>
			</ul>
			</li>
			<li>Sale <span> ></span>
			<ul>
				<li>10% on Revlon kit</li>
				<li>1On1 offer</li>
				<li>30% Flat Sale</li>
			</ul>
			</li>
				<li>Brands <span> ></span>
			<ul>
				<li>Loreal</li>
				<li>Lakme</li>
				<li>Biotique</li>
			</ul>
			</li>
			<li>Sale <span> ></span>
			<ul>
				<li>10% on Revlon kit</li>
				<li>1On1 offer</li>
				<li>30% Flat Sale</li>
			</ul>
			</li>
		</ul>
	</div>

<div class="slider">
	<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100 " src="img/1.jpeg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100 "  src="img/2.jpeg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100 "  src="img/3.jpeg" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
	</div>
</div>

</section>



<script>
	function openmenu(){
		document.getElementById("side-menu").style.display = "block";
		document.getElementById("menu-btn").style.display = "none";
		document.getElementById("close-btn").style.display = "block";
	}

		function closemenu(){
		document.getElementById("side-menu").style.display = "none";
		document.getElementById("menu-btn").style.display = "block";
		document.getElementById("close-btn").style.display = "none";
	}
</script>
</body>
</html>

*{
	margin:0;
	padding:0;
}

body{
	background-color: #f1f3f4;
}

.top-nav-bar {
	height: 67px;
	position: sticky;
	top:0;
	margin-bottom:10px;
	border-bottom: 3px solid #2e86de;
	z-index: 2;
}

.logo{
	height: 40px;
	margin:5px 10px;
	
}

.form-control {
	
	margin-top:12px;
	margin-left:9px;
	border:1px solid #2e86de !important;
	border-top-left-radius: 20px !important;
	border-bottom-left-radius: 20px !important;
	border-top-right-radius: 0px !important;
	border-bottom-right-radius: 0px !important;
}

.input-group-text {
	background-color: #2e86de !important;
	
	border:4.2px solid #2e86de !important;
	border-top-left-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	border-top-right-radius: 20px !important;
	border-bottom-right-radius: 20px !important;
	margin:12px 9px 9px 0 !important;
	cursor: pointer;
}

.search-box {
	display: inline-flex;
	width:60%;
}

.fa-search {
	color: white;
}

.menubar{
	height: 57px;
	width:40%;
	float:right;
}

.menubar ul {
	list-style: none;
	display:inline-flex;
	float:right;


}

.menubar ul li {
	border-right:1px solid #f1f3f4;
	background-color: #2e86de;
	padding:20px 35px;
	
}

.menubar ul li a{
	color:white;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
}


@media only screen and (max-width: 980px){
	.top-nav-bar{
		border-bottom: 10px;
		height: 118px;
	}
	.menubar {
		
		width: 100%;
	}
		.menubar ul {
		width: 100%;
		margin:10px 0;

	}
	.search-box{
		width:100%;
	}
	
	.menubar ul li{
		width: 100%;
		height: 57px;

	}

	
}

/*Side-menu*/

.side-menu {
	width:15%;
	height:79%;
	background-color: #eee;
	float:left;
	z-index:2;
}

.side-menu ul {
	margin-left: 10px;

}

.side-menu ul li {
	margin-top: 10px;
	list-style:none;
	cursor: pointer;
	font-weight: bold;
	
}

.side-menu ul li:hover {
	color: #2e86de;
}

.side-menu ul li ul{

	display: none;
	top:77px;
	z-index: 20;
}

.side-menu ul li:hover ul{
	display: block;
	height: 400px;
	margin-left: 14%;
	background-color: #d4d4d4;
	position: fixed;
	padding: 0px 100px 10px 10px;
	box-shadow: 1px 1px 4px 0px rgba(0,0,0,0.4);
}

span{
	float:right;
	margin-right: 8px;
}
#menu-btn, #close-btn{
	font-size: 30px;
	color:#2e86de;
	margin:10px;
	display: none;


}



@media only screen and (max-width: 980px){
	.side-menu{
		width: 34%;
		position: fixed;
		top:133px;
		z-index:20;
		display: none;	

	}

	.side-menu ul li ul{
		
		top:133px;
	}

	.side-menu ul li:hover ul{
		
		margin-left:32%;
	}

	#menu-btn{
		display: block;
	

	}
}

/*Slider*/

.slider{

	margin-left: 16%;
	width:85%;
	
	padding:0 15px;
}



/*@media only screen and (max-width: 980px){
	.slider {
		width:100%;
	}
}*/
2

I assumed you meant the menu because that was definitely broken, but now I’m not so sure. I don’t see an overflow on the slider. The carousel is contained in its parent and its parent is contained as well.

Anyway, here is a version with absolute positioning for the menu, I changed a few things, but you will have to decide how exactly you want the menu position.

You have some logic issues with your menu, you may want to rethink how it should work (the normal menu will never come back after you have hidden the mobile version with the script). I would also suggest using classes more for styling and not elements. You can quickly run into issues and conflicting styles.

3

Thank you so much for your time. I’ll definitely work on the things indicated. Much appreciated :slight_smile: