title: Bootstrap Carousel to be stretched full width of the page and latched at the top of the page
body: <p><img src="https://i.stack.imgur.com/fBZmL.jpg" alt="enter image description here"></p>
  
  <p>Here, I have the carousel in the middle of the page and I want its width to be stretched to the full width of the page.  Then its top left and right hand corners to be latched onto very top of the page.</p>
  
  <p>And here's what I come up with the following css.</p>
  
  <pre><code>.carousel{
     position: absolute;
     margin-bottom: 20px;
     line-height:1;
     top:0;
     left:0;
     min-width:100%;
     min-height: 500px;
  }
  
  .carousel-inner{
     width: inherit;
  }
  
  .carousel-inner &gt; .item &gt; img{
     min-width: 100%;
  }
  </code></pre>
  
  <p>The above will give me the results I want.  But the problem I see with this result is that when you scrolling the page downwards, the carousel gets "dragged" down and it will eventually overlaps all the other elements of the page.  This is the unwanted side effect and I'm trying to figure out what's the correct css property that will lock my carousel at the top of the page.</p>
  
  <p>Any ideas what could that be?</p>
  
  <p>PS: I'm using Bootstrap 2, not 3 - FYI.</p>