title: Bootstrap Carousel positioning issue
body: <p>I stuck with bootstrap carousel positioning. With few words, I have to do the slider as the picture below.<a href="https://i.stack.imgur.com/vAbad.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vAbad.jpg" alt="enter image description here"></a></p>
  
  <p>Almost all day I am trying to understand how I have to position my slider like this one on the image..Because i have 2 sections. 1st - my HEADER and after the HEADER section I have the bootstrap slider which is going under my .header section and I have to push the slider somehow to the top behind the .header section. Any suggestions or guides ?</p>
  
  <p>Here is my code until this moment.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;header class="header"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;a id="menu-icon" href="#"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;nav class="main-nav"&gt;
          &lt;div class="col-md-6"&gt;
            &lt;ul class="left-nav"&gt;
              &lt;li&gt;&lt;a href="#" class="active-state"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Evaporative Coolers&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Misting Fans&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Ice Makers&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;!-- left-nav --&gt;
          &lt;/div&gt;
          &lt;!-- col-md-6 --&gt;
          &lt;div class="col-md-6"&gt;
            &lt;ul class="right-nav"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Humidifiers&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Air Purifiers&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Product Videos&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;!-- right-nav --&gt;
          &lt;/div&gt;
          &lt;!-- col-md-6 --&gt;
        &lt;/nav&gt;
        &lt;!-- main-nav --&gt;
      &lt;/div&gt;
      &lt;!-- row --&gt;
      &lt;div class="logo-container"&gt;
        &lt;div class="logo"&gt;
          &lt;a href="#" target="_blank"&gt;luma comfort&lt;/a&gt;
          &lt;p class="text-center"&gt;Why Buy Ugly?&lt;/p&gt;
        &lt;/div&gt;
        &lt;!-- logo --&gt;
      &lt;/div&gt;
      &lt;!-- logo-container --&gt;
      &lt;div class="moto"&gt;
        &lt;h1&gt;Because you’re not like&lt;br&gt; everyone else.&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum is simply dummy text of the printing&lt;/p&gt;
        &lt;a href="#" class="btn learn-more"&gt;Learn More&lt;/a&gt;
      &lt;/div&gt;
      &lt;!-- moto --&gt;
    &lt;/div&gt;
    &lt;!-- container --&gt;
  &lt;/header&gt;
  &lt;!-- header --&gt;
  &lt;div id="slider-content" class="carousel slide" data-ride="carousel" data-interval="false"&gt;
    &lt;ol class="carousel-indicators hidden"&gt;
      &lt;li data-target="#slider-content" data-slide-to="0" class="active"&gt;&lt;/li&gt;
      &lt;li data-target="#slider-content" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#slider-content" data-slide-to="2"&gt;&lt;/li&gt;
    &lt;/ol&gt;
  
    &lt;div class="carousel-inner"&gt;
      &lt;div class="active item"&gt;
        &lt;img src="https://s22.postimg.org/e3zmp0bz1/image.jpg" title="someText" alt="someText" class="fill"&gt;
        &lt;div class="carousel-content"&gt;
  
        &lt;/div&gt;
        &lt;div class="carousel-caption"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="https://s22.postimg.org/k679fi0f1/bg_2.jpg" title="someText" alt="someText" class="fill img-responsive"&gt;
      &lt;/div&gt;
      &lt;div class="item"&gt;
        &lt;img src="https://s22.postimg.org/49d2wixel/bg_3.jpg" title="someText" alt="someText" class="fill img-responsive"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"&gt;
      &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
    &lt;/a&gt;
    &lt;a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"&gt;
      &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
      &lt;span class="sr-only"&gt;Next&lt;/span&gt;
    &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>