In the header, I have a container for the logo and another one for the login form. I want the logo to be on the left and the login form to be positioned at the top right corner. However, when I use float-left for the logo container and float-right for the login form, they don't align properly. I've made sure that the containers are large enough to fit in, but they still do not align as expected.
Below is the code snippet:
<header class="bg-inverse text-white col-sm-12" style="border: 1px solid blue">
<div id="logo" class="col-sm-8" style="border: 1px solid red">
<h1 class="font-weight-bold">Somelogo</h1>
</div>
<div id="login-form" class="col-sm-3">
<form class="" style="border: 1px solid blue">
<div class="form-group mb-0">
<label for="username">Username</label>
<input type="text" class="form-control form-control-sm" id="username">
</div>
<div class="form-group mb-1">
<label class="pt-1 mb-0" for="Password" style="border: 1px solid blue">Password</label>
<input type="password" class="form-control form-control-sm" id="password">
</div>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">register</button>
<button type="submit" class="btn btn-primary col-sm-5 btn-sm">login</button>
</form>
</div>
</header>
This is how it looks without setting a position Picture 1
When I set float:left to the div with ID logo and float:right to the div with ID login-form, it looks like this Picture 2
And when only setting the div with ID login-form to float-right, it appears like this Picture 3
PS: I'm attempting to use only Bootstrap 4. Please explain why this alignment issue is happening.