My layout is very simple and consists of an inline search bar and a logout button. However, I'm facing issues with displaying them inline correctly. Here's the code snippet:
HTML:
<div class="nav-bar">
<div class="search">
<form action="" method="post">
<input type="search" placeholder="Search here..." required>
<input type="submit" value="Search">
</form>
</div>
<div class="logout">
<a href="logout.php" class="button-small">Logout</a>
</div>
</div>
CSS:
.nav-bar
{
display: inline-block;
background: #607D8B;
padding: 5px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
width: 100%;
height:27px;
}
.search {
background-color: chartreuse;
width: 250px;
margin: 0 auto;
}
.logout {
display: inline-block;
float: right;
font-family:'Roboto',sans-serif;
}
.logout,
.username
{
background-color: chartreuse;
margin: 0;
padding: 0;
list-style: none;
}
.logout a,
.header-heading a
{
/*display: block;*/
padding: .7em 1em;
color: #607D8B;
text-decoration:none;
/*border-bottom: 1px solid gray;*/
font-family:'Roboto',sans-serif;
}
.logout a:link { color: #607D8B; }
.logout a:visited { color: #607D8B; }
.logout a:focus
{
color: #607D8B;
font-weight:bolder;
}
.logout a:hover
{
color: #607D8B;
font-weight:bolder;
}
.logout a:active
{
color: #607D8B;
}
I've attempted various solutions but the issue persists, as seen in the attached image.