我已经添加了w-100来扩展nav以适合整个容器，然后添加了justify-content-between，它将子容器定位为彼此之间具有所有空间...

<div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex w-100 justify-content-between">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>         
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
        
    </ul>
  </nav>
</div>

这里有一支笔来演示：https://codepen.io/paulmartin91/pen/gOgJeJZ

仅使用CSS时，您可以使用:last-child选择器

ul {
  display:none;
}

ul:last-child {
  display: block;
}

<div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex align-items-center">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>
              
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
        
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
        
    </ul>
  </nav>
</div>

添加float:right; css规则

<div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex align-items-center">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>
              
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
        
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user" style="float:right"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user" style="float:right"></i> login</a></li>
        
    </ul>
  </nav><!-- .nav-menu -->