title: How i can make my nav bar to come over my background
body: <p>So in my project first navbar is coming and then the background which tend my web page a quite long and make a scroll button also there is a horizontal scroll too i dont know why . But i want that my navbar come forward from background and background should go backward. But it is not happening.</p>
  <p><a href="https://codepen.io/mohit-04/pen/wvJxPOK" rel="nofollow noreferrer">https://codepen.io/mohit-04/pen/wvJxPOK</a></p>
  <p><strong>INDEX</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot; /&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;link
        rel=&quot;stylesheet&quot;
        href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css&quot;
        integrity=&quot;sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm&quot;
        crossorigin=&quot;anonymous&quot;
      /&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;
      &lt;script src=&quot;script.js&quot; defer&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;center&gt;
        &lt;!-- &lt;navbar&gt;
          
        &lt;/navbar&gt; --&gt;
        &lt;nav class=&quot;navbar navbar-light bg-light&quot;&gt;
          &lt;span class=&quot;navbar-brand mb-0 h1&quot;&gt;&lt;h1&gt;&amp;#xF17A; TEAM VIEWER&lt;/h1&gt;&lt;/span&gt;
        &lt;/nav&gt;
  
        &lt;div class=&quot;carousel&quot; data-carousel&gt;
          &lt;button
            class=&quot;carousel-button next&quot;
            data-carousel-button=&quot;next&quot;
            data-carousel-button
          &gt;
            &amp;#8669;
          &lt;/button&gt;
          &lt;button
            class=&quot;carousel-button prev&quot;
            data-carousel-button=&quot;prev&quot;
            data-carousel-button
          &gt;
            &amp;#8668;
          &lt;/button&gt;
  
          &lt;ul data-slides&gt;
            &lt;li class=&quot;slide&quot; data-active&gt;
              &lt;div class=&quot;card&quot; style=&quot;width: 18rem&quot;&gt;
                &lt;img
                  class=&quot;card-img-top&quot;
                  src=&quot;https://images.unsplash.com/photo-1644982647531-daff2c7383f3?crop=entropy&amp;cs=tinysrgb&amp;fm=jpg&amp;ixlib=rb-1.2.1&amp;q=60&amp;raw_url=true&amp;ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=600&quot;
                  alt=&quot;Card image cap&quot;
                /&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                  &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
                  &lt;p class=&quot;card-text&quot;&gt;
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  &lt;/p&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class=&quot;slide&quot;&gt;
              &lt;div class=&quot;card&quot; style=&quot;width: 18rem&quot;&gt;
                &lt;img
                  class=&quot;card-img-top&quot;
                  src=&quot;https://images.unsplash.com/photo-1653491888857-6cb8c8f0264c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=60&quot;
                  alt=&quot;Card image cap&quot;
                /&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                  &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
                  &lt;p class=&quot;card-text&quot;&gt;
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  &lt;/p&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class=&quot;slide&quot;&gt;
              &lt;div class=&quot;card&quot; style=&quot;width: 18rem&quot;&gt;
                &lt;img
                  class=&quot;card-img-top&quot;
                  src=&quot;https://images.unsplash.com/photo-1625215081436-85323ed5042c?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=60&quot;
                  alt=&quot;Card image cap&quot;
                /&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                  &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
                  &lt;p class=&quot;card-text&quot;&gt;
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  &lt;/p&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class=&quot;slide&quot;&gt;
              &lt;div class=&quot;card&quot; style=&quot;width: 18rem&quot;&gt;
                &lt;img
                  class=&quot;card-img-top&quot;
                  src=&quot;https://images.unsplash.com/photo-1653597859079-bc6d0e9101de?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzNHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=60&quot;
                  alt=&quot;Card image cap&quot;
                /&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                  &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
                  &lt;p class=&quot;card-text&quot;&gt;
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  &lt;/p&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
            &lt;li class=&quot;slide&quot;&gt;
              &lt;div class=&quot;card&quot; style=&quot;width: 18rem&quot;&gt;
                &lt;img
                  class=&quot;card-img-top&quot;
                  src=&quot;https://images.unsplash.com/photo-1653604212161-b50f445f7987?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw0M3x8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=600&amp;q=60&quot;
                  alt=&quot;Card image cap&quot;
                  height=&quot;200&quot;
                  width=&quot;100&quot;
                /&gt;
                &lt;div class=&quot;card-body&quot;&gt;
                  &lt;h5 class=&quot;card-title&quot;&gt;Card title&lt;/h5&gt;
                  &lt;p class=&quot;card-text&quot;&gt;
                    Some quick example text to build on the card title and make up
                    the bulk of the card's content.
                  &lt;/p&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Go somewhere&lt;/a&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/center&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  <p><strong>STYLE</strong></p>
  <pre><code>@import url(&quot;https://fonts.googleapis.com/css2?family=Lora:ital@1&amp;display=swap&quot;);
  @import url(&quot;https://fonts.googleapis.com/css2?family=Halant:wght@500&amp;display=swap&quot;);
  @import url(&quot;https://fonts.googleapis.com/css2?family=Quattrocento&amp;display=swap&quot;);
  @import url(&quot;https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&amp;display=swap&quot;);
  @import url(&quot;https://fonts.googleapis.com/css2?family=Quattrocento&amp;display=swap&quot;);
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  body {
    background-image: url(&quot;b.avif&quot;);
  
    background-repeat: no-repeat;
    background-size: cover;
  }
  nav {
    position: relative;
  }
  
  h1 {
    font-size: 50px;
    font-family: &quot;Halant&quot;, serif;
  }
  
  h5 {
    font-size: 30px;
    font-weight: bolder;
    font-family: &quot;Quattrocento&quot;, serif;
  }
  
  p {
    font-family: &quot;Nunito Sans&quot;, sans-serif;
  }
  
  a {
    font-family: &quot;Quattrocento&quot;, serif;
  }
  
  .carousel {
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  
  .slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: 200ms opacity ease-in-out;
  }
  
  .slide &gt; img {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  .carousel &gt; ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  
  .slide[data-active] {
    opacity: 1;
  }
  
  .carousel-button {
    position: absolute;
    z-index: 2;
    background: none;
    border: none;
    font-size: 4rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 0.25rem;
    padding: 0 0.5rem;
    background-color: rgba(0, 0, 0, 0.1);
  }
  
  .carousel-button:hover,
  .carousel-button:focus {
    color: purple;
    background-color: rgba(0, 0, 0, 0.2);
  }
  
  .carousel-button:focus {
    outline: 1px solid black;
  }
  
  .carousel-button.prev {
    left: 24rem;
  }
  
  .carousel-button.next {
    right: 24rem;
  }
  
  .card {
    box-shadow: 1px 2px 3px 4px rgba(20, 20, 20, 0.3);
  }
  
  </code></pre>