I am doing the " Responsive Web Design Projects - Build a Product Landing Page" project and for the life of me no matter what I try I cannot get the navbar to stay fixed to the top. What am I doing wrong?
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phat Cat</title>
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@400;800&family=Open+Sans:ital@1&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container" id="header">
<nav id="nav-bar" class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<a class="navbar-brand" href="#"><i id="header-img" class="fas fa-cat"></i> Phat Cat Sweater Co</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarContent">
<ul class="navbar-nav">
<li>
<a class="nav-link" href="#">Features</a>
</li>
<li>
<a class="nav-link" href="#">DIY</a>
</li>
<li>
<a class="nav-link" href="#">Products</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="getStarted">
<h2>Premium handmade feline sweaters</h2>
<form id="form" action="#">
<input type="email" class="form-control" id="email" placeholder="Enter your furriest email" required>
<button id="submitEmail" type="button" class="btn btn-info justify-content-center">Get Catnip</button>
</form>
</div>
</header>
<div class="container">
<section id="features">
<div class="row align-items-center">
<div class="col-lg-1 icon">
<i class="fas fa-leaf"></i>
</div>
<div class="col-lg-11 description">
<h3 id="desc">Infused With Premium Catnip</h3>
<p>All of our kitty sweaters are infused with only the finest catnip your cat is sure to love.</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-1 icon">
<i class="fas fa-shipping-fast"></i>
</div>
<div class="col-lg-11 description">
<h3 id="desc">Cheetah Fast Shipping</h3>
<p>To ensure all of our customers recieve their sweaters on time we have real Cheetahs deliver your package with lighting speed. We also provide free returns if the Cheetah eats some of your sweater.</p>
</div>
</div>
<div class="row align-items-center">
<div class="col-lg-1 icon">
<i class="fas fa-search-dollar"></i>
</div>
<div class="col-lg-11 description">
<h3 id="desc">Quality Guanteed</h3>
<p>Every Phat Cat Sweater is inspected and sniffed by our team of 20 felines to make sure your sweater is fitting, looking and smelling purrfect.</p>
</div>
</div>
</section>
<section id="diy">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8DoGKHlHVcs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="products">
<div class="container">
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="imgs/pattern1.jpeg" alt="">
<div class="card-body">
<h5 class="card-title">First Thing</h5>
<p class="card-text">This is some random words for the card text</p>
<a href="" class="btn btn-outline-success btn-sm">Download</a>
<a href="" class="btn btn-outline-danger btn-sm"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="imgs/pattern2.jpeg" alt="">
<div class="card-body">
<h5 class="card-title">Second Thing</h5>
<p class="card-text">This is some random words for the card text</p>
<a href="" class="btn btn-outline-success btn-sm">Download</a>
<a href="" class="btn btn-outline-danger btn-sm"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="imgs/pattern3.jpeg" alt="">
<div class="card-body">
<h5 class="card-title">Third Thing</h5>
<p class="card-text">This is some random words for the card text</p>
<a href="" class="btn btn-outline-success btn-sm">Download</a>
<a href="" class="btn btn-outline-danger btn-sm"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<span>Copyright 2020, Phat Cat Sweater Co</span>
</footer>
</div>
</body>
</html>
CSS:
body {
font-family: 'Catamaran', Open-Sans;
padding-top: 60px;
background-image: url(https://s1.1zoom.me/b5050/200/Cats_Kittens_Ginger_465221_3840x2400.jpg);
background-size: cover;
background-position: center;
backdrop-filter: blur(5px);
}
#header-img {
font-size: 2rem;
}
#nav-bar {
position: fixed;
top: 0;
}
#getStarted {
text-align: center;
padding: 10px;
}
#email {
width: 30%;
margin: auto;
}
#submitEmail {
margin: 10px;
}
#features {
margin-top: 30px;
}
.icon {
text-align: center;
font-size: 35px;
padding-bottom: 10px;
}
#diy {
margin-top: 50px;
display: flex;
justify-content: center;
}
#products {
margin-top: 50px;
}
Thank you for the help!
-Troy