After experimenting with bootstrap, I encountered a bottom scroll bar issue that seems to be related to margins. I've included my code below for reference.
For the Bootstrap CSS file, you can download it from this link:
https://getbootstrap.com/docs/5.0/getting-started/download/
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-enter code hereprimary">
<div class="container">
<a class="navbar-brand" href="./index.html">
<img src="./imgs/LogoWhitePlain.png" width="35" height="30" class="d-inline-block align-top" alt="DKDESIGNS">
</a>
<!--Logo-->
<div class="collapse navbar-collapse" id="navbarCollapsem">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./projects.html">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./aboutMe.html">About Me</a>
</li>
</ul>
</div>
<!--navigation-->
</div>
</nav>
<!--nav bar-->
</header>
<main role="main">
<!--main content-->
<div class="bg-dark container-">
<div class="row">
<div class="col-md-2 col-sm-4">
<img src="imgs/LogoWhite.png" class="my-sm-4" width="175" height="150" class="d-inline-block align-top" alt="">
<!--Logo-->
</div>
<div class="col-md-10 col-sm-8">
<h4 class="display-5 pt-3 mt-sm-5">
<em class="text-white text-left">
Designs made easy!
</em>
</h4>
</div>
</div>
</div>
<div class="container my-4">
<div class="row">
<!--first row-->
<div class="col-md-8 col-lg-9">
<h4 class="display-6 text-muted text-capitalize">Our mission</h4>
<p>
Our goal is to simplify the art of designing anything for your business, whether it be
a detailed logo for your company's new look, photography for a special event or employee photos, a new
website and/or design to develop for your business, or an advertisement design
to attract new customers/clients. We can help make it easy and efficient, so you can
focus on other important aspects of your business. Let's get started on <u>your</u> project today!
</p>
</div>
<div class="col-md-4 col-lg-3 text-center py-5 bg-primary border border-dark border-3">
<h4 class="text-white">Get your FREE Quote!</h4>
<a href="./quoteMe.html"><button class="btn btn-dark">Here</button></a>
</div>
</div>
</div>
</main>
<footer>
<!--footer content-->
<div class="text-center">
<small class="text-muted text-center">© Daniel Krysty 2021</small>
</div>
<div class="row text-center">
<div class="col-1 offset-2">
<small>
<a class="text-decoration-none text-muted"href="./index.html">Home</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./services.html">Services</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./projects.html">Projects</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./aboutMe.html">About</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./contact.html">Contact</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./websites.html">Websites</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./designs.html">Designs</a>
</small>
</div>
<div class="col-1">
<small>
<a class="text-decoration-none text-muted"href="./photography.html">Photography</a>
</small>
</div>
</div>
</footer>
</body>
CSS changes provided below to override bootstrap.css for version 5.0.2:
body {
padding-top: 3rem;
padding-bottom: 3rem;
width: 100%;
}
.bg-primary {
background-color: rgb(9, 129, 109) !important;
}
.btn-primary {
background-color: rgb(9, 129, 109) !important;
border-color: black !important;
}
.text-primary {
color: rgb(9, 129, 109) !important;
}
.border-primary {
border-color: rgb(9, 129, 109) !important;
}
.jumbotron-detail-skyline {
background: url('../imgs/skykine_BW_new2.jpg') no-repeat fixed;
}
.jumbotron {
height: 30vh;
background-size: cover;
background: black;
width: 100%;
}
main {
margin: auto;
}