Bootstrap: Inline Form with button unaligns when navbar collapses - html

Question

Been trying to learn Web Development and am currently messing around with BootStrap 4.0. I have a search field to the right of the navbar which is inline until the dimensions change to that of a phone and my nav links collapse. In the new format my search field and button are no longer inline. To be clear at tablet dimensions it works fine just not at what I would consider phone size. Any Help would be greatly appreciated.
<!-- NavBar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<!-- Brand and Name -->
<a href="#" class="navbar-brand">
<img src="https://logoobject.com/wp-content/uploads/edd/2018/02/Free-Coffee-Logo-1-820x820.png" width = "30" height="30" class="d-inline-block align-top" alt="">
Koffee
</a>
<!-- For hamburger menu -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsable nav -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left hand side content use margin-right (mr) -->
<ul class="navbar-nav mr-auto">
<!-- Active Link -->
<li class="nav-item">About Us</li>
<!-- Dropdown Menu -->
<li class="nav-item dropdown">
Features
<div class="dropdown-menu" aria-labelledby = "navbarDropdown">
Cultural
The best Cocoa
For the workers
<!-- Just a line :) -->
<div class="dropdown-divider"></div>
Pricing
</div>
</li>
<!-- Disabled link -->
<li class="nav-item">Reviews</li>
</ul>
<!-- Right Hand side content use margin-left (ml) -->
<ul class="navbar-nav ml-auto">
<form class="form-inline">
<input class="form-control" type="search" placeholder="Search..." aria-label="Search">
<button type="button" class="btn btn-outline-success">Go!</button>
</form>
</ul>
</div>
</div>
</nav>
DEMO

Answer 1

Use d-flex instead of form-inline for the search form...
https://jsfiddle.net/ahotm7uv/
<ul class="navbar-nav ml-auto">
<form class="d-flex">
<input class="form-control" type="search" placeholder="Search..." aria-label="Search">
<button type="button" class="btn btn-outline-success">Go!</button>
</form>
</ul>

Answer 2

These are parts of styles that are applied to your .form-control class:
.form-control {
width: 100%;
}
#media (min-width: 576px)
.form-inline .form-control {
width: auto;
}
By default it has width: 100% which is not what you want. But when the screen size is getting bigger than 576px width: auto overlaps it. So changing the default width: 100% to width: auto should do the trick.