I need help with positioning the bootstrap carousel properly. My goal is to have the slider appear as shown in the image below.https://i.sstatic.net/vAbad.jpg
I've been struggling all day to figure out how to position my slider like the one in the image. I have two sections - first, the HEADER section and then the bootstrap slider which is currently going under my .header section. I want to push the slider up behind the .header section. Any tips or guidance would be greatly appreciated.
Here is the code I have so far:
.top-layer { background: #8bc541; padding-bottom: 25px; }
.logo-container { display: flex; justify-content: center; align-items: center; position: relative; }
.logo { position: absolute; bottom: 9px; width: 164px; height: 32px; }
.logo a { margin-bottom: 5px; display: block; height: 100%; background: url(../images/logo.png) no-repeat 0 0; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; }
.logo p { padding: 0 4px; margin-right: 2px; letter-spacing: 0.3px; cursor: pointer; text-align: center; }
.main-nav { clear: both; }
.main-nav .left-nav { list-style: none; float: left; text-align: right; padding-right: 136px; }
.main-nav .left-nav li,
.main-nav .right-nav li { display: inline-block; }
.main-nav .left-nav li a,
.main-nav .right-nav li a { font-size: 14px; font-weight: bold; color: #000; text-decoration: none; line-height: 24px; letter-spacing: 0.3px; }
.main-nav .left-nav li a:hover,
.main-nav .right-nav li a:hover { color: #fff; }
.main-nav .left-nav li + li:before,
.main-nav .right-nav li + li:before { content: ''; border-right: 2px solid #fff; margin: 0 10px; }
.main-nav .right-nav { list-style: none; float: right; text-align: left; padding-left: 136px; }
.main-nav .left-nav li,
.main-nav .right-nav li { margin-top: 36px; }
.slider-content { position: absolute; top: 0; left: 50%; z-index: 20; }
.fill { width: 100%; height: 100%; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }
.bg-layer { background: url(../images/bg.jpg) 0 0 no-repeat; background-size: cover; min-height: 941px; }
.glyphicon-chevron-left { background: url(../images/btn-change.png) 0 0 no-repeat; min-width: 50px; min-height: 50px; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; }
.glyphicon-chevron-right { background: url(../images/btn-change.png) 0 0 no-repeat; min-width: 50px; min-height: 50px; transform: rotate(180deg); font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; }
.glyphicon-chevron-left:hover,
.glyphicon-chevron-right:hover { background: url(../images/btn-change-hov.png) 0 0 no-repeat; min-width: 50px; min-height: 50px; }
.carousel-control.left,
.carousel-control.right { background: none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header class="header">
... (omitted for conciseness)
</ul>
<!-- left-nav -->
</div>
<!-- col-md-6 -->
... (omitted for conciseness)
</nav>
<!-- main-nav -->
... (omitted for conciseness)
</div>
<!-- logo-container -->
<div class="moto">
... (omitted for conciseness)
</div>
<!-- moto -->
</div>
<!-- container -->
</header>
<!-- header -->
... (omitted for conciseness)
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>