Bootstrap remove 1px padding/gap between Nav & Carousel/Div - html

Question

I'm trying to remove the gap between the Navbar and the Carousel.
However I can't for the life of me work out which element is causing the gap and how to fix it.
/* CSS used here will be applied after bootstrap.css */
.navbar {
margin: 0; /*add this*/
padding: 0px;
}
.navbar-default {
background-color: #ffffff;
}
/* title */
.navbar-default .navbar-brand {
color: #000000;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #808080;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #000000;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #808080;
}
/* active link */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #ffffff;
background-color: #000000;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #ff0000;
}
/* caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}
.container {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Progression</a>
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Physio</li>
<li>Massage</li>
<li>Beauty</li>
<li>First Aid</li>
</ul>
</div>
</div>
</nav>
<!-- Carousel -->
<div class="container">
<div class="row">
<div class="col-sm-12>
<div id=" my-slider"="" data-ride="carousel">
<!-- indicators dot nav -->
<!-- wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://lh5.googleusercontent.com/-WHXl1TAoHoQ/VsW7_mHWeQI/AAAAAAAAAEQ/nzQm8w62c3s/w1310-h524-no/Progression_Massage_Budha.png" alt="Physio Massage Val d'Isere">
<div class="carousel-caption">
<h2>Massage</h2>
<h4>Relaxation to Deep Tissue</h4>
</div><!-- end carousel caption -->
</div>
<div class="item">
<img src="https://lh4.googleusercontent.com/-lj7DIStRI8M/VthrRPFcQFI/AAAAAAAAAFY/2ynRLjTZTnI/w1310-h524-no/Progression_Beauty_Therapies.png" alt="Beauty Treatments Nails Facials & Waxing Val d'Isere">
<div class="carousel-caption">
<h2>Beauty</h2>
<h4>Nails - Facials - Waxing</h4>
</div>
</div>
<div class="item">
<img src="https://lh4.googleusercontent.com/-aCIY16PFylg/VsW6L-YwpqI/AAAAAAAAADA/wSTG1QlJLqY/w1310-h524-no/Progression_Val_dIsere.png" alt="Physiotherapy Assesment Treatment Rehab Val d'Isere">
<div class="carousel-caption">
<h2>Physiotherapy</h2>
<h4>Assesment Treatment Rehab</h4>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.bootply.com/jbTugk4aPV

Answer 1

Actually that's not a 1 pixel gap it a border in css names navbar.less line no. 15.
Here is your css
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
Remember its your css file code not mile the border in it creating that gap you can override this by typing another css in your file.
.navbar{
border:none!important;
}
Or you can simply set the border-width to 0px in
.navbar-static-top {
z-index: 1000;
border-width: 0px;
}
to remove the 1px white navbar border.