My navbar is not showing at the top. I have used my bootstrap-css file and custom scss file. I am attaching the screenshot.

Also, I wanted to know if the overlay div present here is important or not.

I want it to look like [this](https://ibb.co/z2NJXhD), and my current page looks like [this](https://ibb.co/zxYPzVh) 

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./CSS/style.css">
    <title>Aurora Grove</title>
</head>
<body>
<nav class="navbar navbar-expand-md  navbar-dark ">
<a class="navbar-brand" href="#"><h3 class="mb-0">Aurora Grove</h3></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MainNav" aria-controls="MainNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
 <div class="collapse navbar-collapse" id="MainNav">
 <ul class="navbar-nav ml-auto">
 <li class="nav-item active">
 <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a></li>     
<li class="nav-item">
<a class="nav-link" href="#">Explore</a>
</li>     
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>     
<li class="nav-item">
<a class="nav-link" href="#">Book</a>
</li>     
</ul>
</div>
</nav>
<section id="showcase" class="d-flex justify-content-center align-items-center">
<div id="overlay"></div>
<div class="container text-center text-white " id="header">
<h3 class="display-5">mordern camping</h3>
<h1 class="display-1">Aurora Grove</h1>
<p class="lead d-none d-md-block">Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores?</p>
<button id="book" class="btn btn-primary px-5">Book  Now</button>
</div>
</section>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

```

scss file

```
body{
    background-color: #d460bb;
    font-family: "Raleway",sans-serif;
}
.navbar{
    font-weight: 100;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    .navbar-brand h3{
        font-weight: 100;
    }
    .nav-item{
        font-size: 1.4rem;
    }
    .nav-link:hover{
        transition: border 0.2s;
        border-bottom: 1px solid white;
    }
}
// showcasase
#showcase{
background: url('../images/main.jpeg') bottom center  no-repeat;
min-height: 30rem;
position: relative;
#header{
z-index: 2;
}
#overlay{
    background: rgba($color: #000000, $alpha: 0.2);
    position: absolute;
    top: 0rem;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
h1{
    font-family: "Questrial",sans-serif;
    line-height: 1;

}
#book{
    font-size: 1.5rem;
    border-radius: 2rem;
}
}
// phone 
@media (max-width:768px){
.navbar{
    background: #1f1f1f;
    .nav-link:hover{
border-bottom: none;
    }
}
// showcase 
#showcase{
    min-height: 500px;
    h1{
        font-size: 4rem;
    }
}
}

```

Thanks.