I'm currently in the process of learning bootstrap. I copied the code for the 'Flush' Accordion from the bootstrap docs, but my version looks completely off. Despite linking the CSS stylesheet and JS Bundle, it doesn't seem to align properly. You can view how mine appears here.
I haven't made any changes to the default code provided by Bootstrap. I could use some guidance on what might be going wrong. Any assistance would be greatly appreciated. Thank you.
Below is the code I've used (the accordion section is located at the very bottom).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learning Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313c3c27202721322313677d637d63">[email protected]</a>/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark py-2 fixed-top">
<a href="#home" class="navbar-brand">{ }</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navmenu"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navmenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#home" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#courses" class="nav-link">Courses</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="bg-white text-light p-5 p-lg-0" id="home">
<div class="container">
<div class="d-sm-flex align-items-center">
<div class="text-center text-sm-start">
<h1 class="text-dark&q...