I've been struggling to create a Right Aligned Navigation Bar with a search bar and a login icon that stay in one row on the page. No matter how I try, it keeps jumping down instead of aligning properly. Here is an image of what I'm trying to achieve: Here
nav{
display: flex;
justify-content: space-between;
background-color: antiquewhite;
}
ul {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin-right: 20px;
float: left;
}
form {
display: flex;
align-items: center;
margin: 0 20px;
}
form input {
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
.right{
display: flex;
align-items: center;
}
.searchbar{
margin-right: auto;
}
a.login-link {
display: flex;
align-items: center;
margin-left: auto;
}
img.login-icon {
width: 20px;
height: 20px;
margin-right: 20px;
}
img.logo {
width: 230px;
height: auto;
margin-right: 20px;
} <div class="nav">
<nav>
<ul>
<li><a href="index.php"><img class="logo"src="Snooker Logo.png" alt="Logo"></a></li>
<li><a href="index.php"><h4>Home</h4></li></a>
<li><a href="bookingstatus"><h4>Booking Status</h4></li></a>
<li><a href="paymentfile"><h4>Payment</h4></li></a>
<li><a href="bookingfile"><h4>Booking</h4></li></a>
</ul>
<div class="right">
<div class="searchbar">
<form>
<input type="search" placeholder="Search for an event you want">
</form>
</div>
<a class="login-link" href="#login">
<img class="login-icon" src="loginiconsnew.png" alt="Login">
</a>
</div>
</nav>
</div>I need the navigation bar to be horizontal with the search bar and login icon aligned to the right-hand side.