How can I fix the search bar on the right side of the screen within the Bootstrap navbar, without compromising its flexibility? I want it to always stay at the rightmost side regardless of the number of links in my navigation bar. As a beginner in CSS and Bootstrap, I'm unsure whether I should adjust the size in the class section of the element or override it with CSS. While I've been able to customize other parts of the navbar, I'm struggling to move the search bar even slightly. My assumption is that this is due to d-flex positioning it next to the previous element.
#navbarDog{
background-color: #F5EFE6;
}
#logo{
height: 100px;
}
.nav-link{
font-size: 20px;
transition: font-size 0.4s;
}
.nav-link:hover{
font-size: 25px;
}
.header-products {
display: flex;
align-items: center;
justify-content: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox excersice - Fibonacci Flexbox</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b5849790c170b1708">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc9e9393888f888e9d8cbcc9d2ced2cc">[email protected]</a>/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg" id="navbarDog">
<div class="container-fluid">
<a class="navbar-brand" href="index.html" ><img src="../img/logo.png" alt="" id="logo"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<header class="header-products">
<h1>Products</h1>
</header>
<main>
<div class="gallery">
<img src="" alt="">
</div>
<p>Feel free to purchase one of our t-shirts, your money will go to save even more dogs</p>
</main>
</body>