Bootstrap 4.1.0中pull-right类失效，float类也无法对齐如何解决？

嘿，我之前一直在用Bootstrap 3+版本，最近切换到4.1.0版本后遇到了元素对齐的问题：原本用pull-right和pull-left类做元素左右对齐完全失效，后来查资料知道Bootstrap 4里换成了float-left和float-right，但替换之后问题还是没解决。

这是当前显示效果与期望位置的对比图：

我用到的代码如下：

<nav class="navbar navbar-static-top"> 
  <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button"> 
    <span class="sr-only">Toggle navigation</span> 
  </a> 
  <div class="header_text float-left ">Home</div> 
  <div class="header_text float-right">Company Name</div> 
  <div class="navbar-custom-menu "> 
    <ul class="nav navbar-nav"> 
      <li class="dropdown user user-menu"> 
        <a href="#" class="dropdown-toggle float-right" data-toggle="dropdown"> 
          <img src="./Images/user2-160x160.jpg" class="user-image" alt="User Image"> 
          <span class="hidden-sm">Welcome</span> 
        </a> 
        <ul class="dropdown-menu"> 
        </ul> 
      </li> 
    </ul> 
  </div> 
</nav>

我先是试了pull-right和pull-left类，查资料后替换成float-left和float-right，但还是达不到预期的对齐效果，恳请大家帮忙解决这个问题～

另外附上给@soheilPs参考的图片：

内容的提问来源于stack exchange，提问作者Ben