carousel overlaps to fixed nav bar when view is changed - css

Question

My HTML is this:
<div class="navbar navbar-fixed-top" >
some divs inside...
</div>
<div class="filler"> </div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="<?php print(base_url('assets/images/slide-one.jpg')); ?>" alt="First slide" />
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 1!</div>
<div class="sub-text">subtext</div>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="<?php print(base_url('assets/images/slide-two.jpg')); ?>" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<div class="main-text">TEXT 2</div>
<div class="sub-text">subtext </div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS:
.filler {
height: 230px; //same height of class navbar.i do this so
carousel will not overlap the fixed navbar
}
The design runs OK. The top div is fixed at the top. But when I change the view to smaller or to mobile view, the carousel overlaps the fixed navbar. How will I format my css so that carousel will not overlap? Or is there another way to format this? Thank you.