float浮动失效，position定位有效的问题

使用的框架：Bootstrap4

使用场景：搭后台的前端框架，想实现一级菜单左对齐，二级菜单右对齐。

出现问题：使用float:right或class="float-right"无效，position: absolute,right:0px;可以，但是会出现二级菜单失去高度的问题，因为不想重写布局，所以放弃使用绝对定位。

菜单代码：

<div id="menu">
        <div class="card bg-secondary">
            <a class="card-link text-white" data-toggle="collapse" href="#collapse1">
                <div class="card-header row">
                <i class="fa fa-cog"></i>
                <div class="d-none d-md-block">问题库配置</div>
                </div>
            </a>
            <div id="collapse1" class="collapse" data-parent="#menu">
                <div class="card-body row">
                <i class="fa fa-object-group"></i><div class="d-none d-md-block float-right">问题库分组设置</div>
                </div>
            </div>
        </div>
        <div class="card bg-secondary">
            <a class="card-link text-white" data-toggle="collapse" href="#collapse2">
                <div class="card-header row">※<div class="d-none d-md-block">菜单二</div></div>
            </a>
            <div id="collapse2" class="collapse" data-parent="#menu">
                <div class="card-body row">
                ※<div class="d-none d-md-block float-right">二的子菜单</div>
                </div>
            </div>
        </div>
    </div>

样式代码：

html,body{
    height: 100%;
}
.head{
    height: 130px;
    width: 100%;
    position: absolute;
    top: 0px;
}
.content{
    height: auto;
    min-height: 200px;
    width: 100%;
    position: absolute;
    top: 130px;
    bottom: 50px;
}
.menu{
    padding: 0rem;
}
.menu .card .card-header{
    padding: 0.25rem 0.55rem;
    align-items: center!important;
}

#menu .card-body{
    padding: 0.25rem 0.25rem;
    width: 100%;
    align-items: center!important;
}
#menu .d-none.d-md-block{
    margin-left: 5px;
}

在逐个删除二级菜单的样式后，发现问题不在二级菜单文字<div class="d-none d-md-block float-right">问题库分组设置</div>的样式后，开始逐个删除二级菜单<div class="card-body row">，这是发现问题出在属性display上，在.row里存在display: flex;（Bootstrap4框架的样式），经过百度搜索并尝试，发现在添加#menu .card-body{justify-content: flex-end !important;}后实现效果。