title: Image and texts not going are not going behind the navigation bar
body: <p>I'm making a webpage for my grandpa, and My navigation page is not staying ontop of stuff when I scroll, here is my html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;   
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"&gt;
      &lt;title&gt;CountrySideBycicling&lt;/title&gt;
      &lt;link rel="stylesheet" href="main.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css"&gt;
      &lt;script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"&gt;
      &lt;div class="container"&gt;
        &lt;a class="navbar-brand" href="#"&gt;
          &lt;!-- logo --&gt;
              &lt;img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt=""&gt;
            &lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
            &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarResponsive"&gt;
          &lt;ul class="navbar-nav ml-auto"&gt;
            &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link" href="index.html"&gt;Home
                    &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
                  &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="about.html"&gt;About&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="gallery.html"&gt;Gallery&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="services.html"&gt;Services&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="contacts.html"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="brands.html.html"&gt;Brands&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
        &lt;div class="jumbotron text-center"&gt;
  &lt;div class="container"&gt;
    &lt;div style="height: 25px;"&gt;&lt;/div&gt;
      &lt;h1&gt;CountrySideBycicling&lt;/h1&gt;
      &lt;div style="height: 25px;"&gt;&lt;/div&gt;
      &lt;p&gt;  Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
         quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
     &lt;/p&gt;
     &lt;div style="height: 25px;"&gt;&lt;/div&gt;
      &lt;button class="btn btn-primary"&gt;Read More&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  
    &lt;!-- Page Content --&gt;
    &lt;div class="container"&gt;
  
      &lt;!-- Heading Row --&gt;
      &lt;div class="row align-items-center my-5"&gt;
        &lt;div class="col-lg-7"&gt;
          &lt;img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt=""&gt;
        &lt;/div&gt;
        &lt;!-- /.col-lg-8 --&gt;
        &lt;div class="col-lg-5"&gt;
          &lt;h1 class="font-weight-light"&gt;Business Name or Tagline&lt;/h1&gt;
          &lt;p&gt;This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!&lt;/p&gt;
          &lt;a class="btn btn-primary" href="#"&gt;Call to Action!&lt;/a&gt;
        &lt;/div&gt;
        &lt;!-- /.col-md-4 --&gt;
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
  
      &lt;!-- Call to Action Well --&gt;
      &lt;div class="card text-white bg-secondary my-5 py-4 text-center"&gt;
        &lt;div class="card-body"&gt;
          &lt;p class="text-white m-0"&gt;This call to action card is a great place to showcase some important information or display a clever tagline!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
        &lt;!-- /.col-md-4 --&gt;
  
      &lt;/div&gt;
      &lt;!-- /.row --&gt;
  
    &lt;/div&gt;
    &lt;!-- /.container --&gt;
  
    &lt;!-- Content section --&gt;
    &lt;section class="py-5"&gt;
      &lt;div class="container"&gt;
        &lt;h1&gt;Section Heading&lt;/h1&gt;
        &lt;p class="lead"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
    &lt;!-- Image Section - set the background image for the header in the line below --&gt;
    &lt;section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');"&gt;
      &lt;!-- Put anything you want here! There is just a spacer below for demo purposes! --&gt;
      &lt;div style="height: 200px;"&gt;&lt;/div&gt;
    &lt;/section&gt;
  
    &lt;!-- Content section --&gt;
    &lt;section class="py-5"&gt;
      &lt;div class="container"&gt;
        &lt;h1&gt;Section Heading&lt;/h1&gt;
        &lt;p class="lead"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  
          &lt;!-- slider --&gt;
          &lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"&gt;
            &lt;ol class="carousel-indicators"&gt;
                &lt;li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                &lt;li data-target="#carouselExampleIndicators" data-slide-to="1"&gt;&lt;/li&gt;
                &lt;li data-target="#carouselExampleIndicators" data-slide-to="2"&gt;&lt;/li&gt;
            &lt;/ol&gt;
            &lt;div class="carousel-inner" role="listbox"&gt;
                &lt;div class="carousel-item active"&gt;&lt;/div&gt;
                &lt;div id="target" class="carousel-item"&gt;&lt;/div&gt;
                &lt;div class="carousel-item"&gt;&lt;/div&gt;
            &lt;/div&gt;
            &lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"&gt;
                &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
            &lt;/a&gt;
            &lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"&gt;
                &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
                &lt;span class="sr-only"&gt;Next&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div style="height: 50px;"&gt;&lt;/div&gt;
  
  
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
  &lt;!-- Content Row --&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-4 mb-5"&gt;
      &lt;div class="card h-100"&gt;
        &lt;div class="card-body"&gt;
          &lt;h2 class="card-title"&gt;Card One&lt;/h2&gt;
          &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;a href="#" class="btn btn-primary btn-sm"&gt;More Info&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /.col-md-4 --&gt;
    &lt;div class="col-md-4 mb-5"&gt;
      &lt;div class="card h-100"&gt;
        &lt;div class="card-body"&gt;
          &lt;h2 class="card-title"&gt;Card Two&lt;/h2&gt;
          &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;a href="#" class="btn btn-primary btn-sm"&gt;More Info&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- /.col-md-4 --&gt;
    &lt;div class="col-md-4 mb-5"&gt;
      &lt;div class="card h-100"&gt;
        &lt;div class="card-body"&gt;
          &lt;h2 class="card-title"&gt;Card Three&lt;/h2&gt;
          &lt;p class="card-text"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="card-footer"&gt;
          &lt;a href="#" class="btn btn-primary btn-sm"&gt;More Info&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
   &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;!-- Footer --&gt;
  &lt;footer class="page-footer font-small mdb-color pt-4"&gt;
  
    &lt;!-- Footer Links --&gt;
    &lt;div class="container text-center text-md-left"&gt;
  
      &lt;!-- Footer links --&gt;
      &lt;div class="row text-center text-md-left mt-3 pb-3"&gt;
  
        &lt;!-- Grid column --&gt;
        &lt;div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3"&gt;
          &lt;h6 class="text-uppercase mb-4 font-weight-bold"&gt;CountrySideBycicling&lt;/h6&gt;
          &lt;p&gt;Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
            consectetur
            adipisicing elit.&lt;/p&gt;
        &lt;/div&gt;
        &lt;!-- Grid column --&gt;
  
        &lt;hr class="w-100 clearfix d-md-none"&gt;
  
        &lt;!-- Grid column --&gt;
        &lt;div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3"&gt;
          &lt;h6 class="text-uppercase mb-4 font-weight-bold"&gt;Brand Sites&lt;/h6&gt;
          &lt;p&gt;
            &lt;a href="#!"&gt;Bikesite&lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#!"&gt;Bikesite&lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#!"&gt;Bikesite&lt;/a&gt;
          &lt;/p&gt;
  
        &lt;/div&gt;
  
        &lt;!-- Grid column --&gt;
  
        &lt;hr class="w-100 clearfix d-md-none"&gt;
  
        &lt;!-- Grid column --&gt;
        &lt;div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3"&gt;
          &lt;h6 class="text-uppercase mb-4 font-weight-bold"&gt;Useful links&lt;/h6&gt;
          &lt;p&gt;
            &lt;a href="gallery.html"&gt;Gallary&lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;a href="brands.html"&gt;Brands&lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;
            &lt;a href="about.html"&gt;About&lt;/a&gt;
          &lt;/p&gt;
  
        &lt;/div&gt;
  
        &lt;!-- Grid column --&gt;
        &lt;hr class="w-100 clearfix d-md-none"&gt;
  
        &lt;!-- Grid column --&gt;
        &lt;div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3"&gt;
          &lt;h6 class="text-uppercase mb-4 font-weight-bold"&gt;Contact&lt;/h6&gt;
          &lt;p&gt;
            &lt;i class="fas fa-home mr-3"&gt;&lt;/i&gt; windsor, oh, cox road&lt;/p&gt;
          &lt;p&gt;
            &lt;i class="fas fa-envelope mr-3"&gt;&lt;/i&gt; grandpa@gmail.com&lt;/p&gt;
          &lt;p&gt;
            &lt;i class="fas fa-phone mr-3"&gt;&lt;/i&gt; + 01 234 567 88&lt;/p&gt;
        &lt;/div&gt;
        &lt;!-- Grid column --&gt;
  
      &lt;/div&gt;
      &lt;!-- Footer links --&gt;
  
      &lt;hr&gt;
  
      &lt;!-- Grid row --&gt;
      &lt;div class="row d-flex align-items-center"&gt;
  
        &lt;!-- Grid column --&gt;
        &lt;div class="col-md-7 col-lg-8"&gt;
  
          &lt;!--Copyright--&gt;
          &lt;p class="text-center text-md-left"&gt;© 2020 Copyright:
            &lt;a href="http://www.countrysidebicycling.com/"&gt;
              &lt;strong&gt;countrysidebicycling.com&lt;/strong&gt;
            &lt;/a&gt;
          &lt;/p&gt;
  
        &lt;/div&gt;
        &lt;!-- Grid column --&gt;
  
        &lt;!-- Grid column --&gt;
        &lt;div class="col-md-5 col-lg-4 ml-lg-0"&gt;
  
          &lt;!-- Social buttons --&gt;
          &lt;div class="text-center text-md-right"&gt;
            &lt;ul class="list-unstyled list-inline"&gt;
              &lt;li class="list-inline-item"&gt;
                &lt;a class="btn btn-social-icon btn-vk"&gt;
                  &lt;span class="fa fa-facebook"&gt;&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="list-inline-item"&gt;
                &lt;a class="btn btn-social-icon btn-vk"&gt;
                  &lt;span class="fa fa-instagram"&gt;&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="list-inline-item"&gt;
                &lt;a class="btn btn-social-icon btn-vk"&gt;
                  &lt;span class="fa fa-twitter"&gt;&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="list-inline-item"&gt;
                &lt;a class="btn btn-social-icon btn-vk"&gt;
                  &lt;span class="fa fa-pinterest"&gt;&lt;/span&gt;
                &lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
        &lt;!-- Grid column --&gt;
  
      &lt;/div&gt;
      &lt;!-- Grid row --&gt;
  
    &lt;/div&gt;
    &lt;!-- Footer Links --&gt;
  
  &lt;/footer&gt;
  
  
      &lt;script src="jquery.slim.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Then here is my css( there are other pages, but I just need to know how to do it in this one)</p>
  
  <pre><code>body{
      margin: 0;
      padding: 0;
  }
  
  div{
      width: 100%;
      height: 100%;
  }
  .navbar-default {
      background: none;
  }
  .navbar{
     position: fixed;
      padding: 10px 0 10px 10px;
      top: 0;
      width: 100%;
  
    }
  
    footer{
        background-color:#e6e6e6;
    }
  
    .jumbotron{
        background-image: url('download.jpeg');
        color: white;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 400px;
        margin-top: 0px;
        margin-bottom: 8px;
    }
    a{
        color:#2e5984;
    }
  
   .navbar-brand{
       height: 60px;
       width: 100px;
   }
  
  
   #aboutusimg{
       background-size: 100%;
          background-image: url(download.jpeg);
  
          background-repeat:no-repeat;
  
          height: 400px;
          }
  
  
  /* slider */
  
  .carousel .carousel-item {
      width: 100%;
      height: 100vh;
      background-size: cover;
      background-position: center;
  }
  
  .carousel .carousel-item:first-of-type {
      background-image: url('download.jpeg');
  }
  
  .carousel .carousel-item:nth-of-type(2) {
      background-image: url("download.jpeg");
  }
  
  .carousel .carousel-item:last-of-type {
      background-image: url("download.jpeg");
  }
  
  .carousel-control-prev-icon, .carousel-control-next-icon {
      width: 50px;
      height: 50px;
  }
  
  
  /* partners slider, about page */
  
  
  
  
  
  
  /* carousel */
  
  h2{
      text-align:center;
      padding: 20px;
    }
    /* Slider */
  
    .slick-slide {
        margin: 0px 20px;
    }
  
    .slick-slide img {
        width: 100%;
    }
  
    .slick-slider
    {
        position: relative;
        display: block;
        box-sizing: border-box;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
                user-select: none;
        -webkit-touch-callout: none;
        -khtml-user-select: none;
        -ms-touch-action: pan-y;
            touch-action: pan-y;
        -webkit-tap-highlight-color: transparent;
    }
  
    .slick-list
    {
        position: relative;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
    }
    .slick-list:focus
    {
        outline: none;
    }
    .slick-list.dragging
    {
        cursor: pointer;
        cursor: hand;
    }
  
    .slick-slider .slick-track,
    .slick-slider .slick-list
    {
        -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
             -o-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
    }
  
    .slick-track
    {
        position: relative;
        top: 0;
        left: 0;
        display: block;
    }
    .slick-track:before,
    .slick-track:after
    {
        display: table;
        content: '';
    }
    .slick-track:after
    {
        clear: both;
    }
    .slick-loading .slick-track
    {
        visibility: hidden;
    }
  
    .slick-slide
    {
        display: none;
        float: left;
        height: 100%;
        min-height: 1px;
    }
    [dir='rtl'] .slick-slide
    {
        float: right;
    }
    .slick-slide img
    {
        display: block;
    }
    .slick-slide.slick-loading img
    {
        display: none;
    }
    .slick-slide.dragging img
    {
        pointer-events: none;
    }
    .slick-initialized .slick-slide
    {
        display: block;
    }
    .slick-loading .slick-slide
    {
        visibility: hidden;
    }
    .slick-vertical .slick-slide
    {
        display: block;
        height: auto;
        border: 1px solid transparent;
    }
    .slick-arrow.slick-hidden {
        display: none;
    }
  </code></pre>
  
  <p>It says that this post is mostly code, please add some more details. but I feel like I have all the details necessary, so I'm just writing random text to see if the problem will go away. </p>