Recently, I have been working with Bootstrap and have encountered a problem with the carousel. I have placed carousel images below my navbar, but there seems to be a gap between the navbar and the carousel image. I want the image to be right below the navbar. How can I solve this issue?
Here is my HTML Code and CSS Code:
/*CSS*/
.navbar-nav {
width: 100%;
text-align: center;
}
.navbar-nav > li {
float: none;
display: inline-block;
}
header .navbar-default {
border: none;
background-image: linear-gradient(to bottom, #2b2b2b, #555555);
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
}
header .navbar-default .navbar-nav a {
color: #ffffff;
}
header .navbar-default .navbar-nav a:hover {
color: #dfdfdf;
}
/* HTML */
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="page main-menu">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active"><img src="images/slide1.jpg" alt="Lifestyle Photo"></div>
</div>
</div>
</header>