FontAwesome Icon On Same Line As NavBar - html

Question

I have a navigation bar that displays properly until a user logs in.
Before logging in:
After logging in:
I'm having trouble figuring out why the Log Out fontawesome icon is wrapping onto the next line, when it's the same size (I attempted making it slightly smaller even) than the avatar icon to login. The problem isn't the width of the parent div, because I attempted adding another <li><a>Test Item</a></li> and it didn't wrap to the next line.
HTML:
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="../../">Home</a></li>
<li>Build A Box</li>
<li>FAQ</li>
<li>Contact Us</li>
#if (User.Identity.IsAuthenticated)
{
<li>My Account</li>
using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm" }))
{
#Html.AntiForgeryToken()
<li></li>
}
}
else
{
<li class="nav-item dropdown">
<div class="dropdown-menu" aria-labelledby="LoginDropdownLink">
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = "../../Home/Account" }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.TextBoxFor(m => m.Email, new { #class = "input-text", #placeholder="Email Address"})
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
#Html.PasswordFor(m => m.Password, new { #class = "input-text", #placeholder="Password" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
#Html.CheckBoxFor(m => m.RememberMe)
#Html.LabelFor(m => m.RememberMe)
<input type="submit" value="Log in" class="btn btn-default" />
}
</div>
</li>
}
</ul>

Answer 1

It's hard to say without the CSS but try to remove nav-link in the class attribute of the logout link (l.14 in your code).
So the line will be:
<li></li>
Because the other links do not have this class so I suspect it to be the cause of your trouble.