We are struggling to align our navigation items to the right side of our page. Despite using a container class and align-items-end, we have not been successful in achieving this. We must confess that this section is somewhat hastily put together, and we do not fully comprehend everything happening within it. Our goal is to create a top section on our page with a cover image, navigation aligned to the right inside the container, a heading, and two buttons. Additionally, we require our navigation to collapse at the small (mobile) breakpoint.
This is our design concept from Photoshop, showcasing what we aim for our final design to resemble.
Currently, this is how our code is rendering.
Where are we making mistakes?
.cover {
min-height: 500px;
background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(img/moco-trucks.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: #fff;
position: relative;
}
.navbar-dark .navbar-nav .nav-link {
color: #fff;
}
.navbar-dark:hover,
.navbar-dark:focus,
.navbar-dark:active {
color: rgba(199, 84, 40, 1)
}
.nav-item,
.nav-link {
color: #fff;
text-transform: uppercase;
}
.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #c75428;
}
.nav-pills .nav-link.active:hover,
.nav-pills .show>.nav-link {
color: #fff;
background-color: #a64723;
}
.nav-link:hover,
.nav-link:focus,
.nav-link:active {
color: #c75428;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ec8e8383989f989e8d9cacd8c2dac2dc">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- container with bg img -->
<div class="cover">
<div class="container justify-content-end">
<!-- NAV Here -->
<nav class="navbar navbar-expand-sm navbar-dark" aria-label="responsive navbar">
<a class="navbar-brand" href="index.html"><img src="img/the-other-side-moving-storage-color-white.png" width="75%" height="75%"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsive-navbar" aria-controls="responsive-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsive-navbar">
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
<li class="nav-item">
<a class="nav-link" href="denver-moving-services.html">Moving</a>
</li>
<li class="nav-item">
<a class="nav-link" href="denver-storage-company.html">Storage</a>
</li>
<li class="nav-item">
<a class="nav-link" href="receiving-and-delivery.html">Furniture Delivery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about-us.html">About</a>
</li>
<li class="nav-item">
<a href="free-estimate.html"><button class="btn btn-tosa" type="submit">Free Estimate</button></a>
</li>
</ul>
</div>
</nav>
</div>
<!-- Nav end -->
<!-- FS Hero -->
<div class="container-xl mb-4">
<div class="row text-center">
<div class="col-12">
<h1 class="py-5">Denver Moving and Storage</h1>
<a href="free-estimate.html"><button type="button" class="btn btn-tosa mx-3">Free Estimate</button></a>
<a href="about-us.html"><button type="button" class="btn btn-outline-tosa mx-3">Our Story</button></a>
</div>
</div>
</div>
<!-- End FS Hero -->
</div>
<!-- End Cover -->