为什么保证金权利：auto对正当内容有影响？

Question

以下是使用bootstrap代码版本4。

<div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="/">Dashboard <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/requests/get">File Request</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/requests/send">Send Files</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/history">History</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/users">User Management</a>
            </li>
        </ul>
    </div>

.navbar-toggleable-md .navbar-collapse {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    width: 100%;
    justify-content: flex-end;
}

.navbar-toggleable-md .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
}

.mr-auto {
    margin-right: auto !important;
}

我想将ul向右移动，因此我在justify-content: flex-end上设置.navbar-collapse。在我删除.mr-auto之前，它一开始并没有工作。

我想知道为什么margin-right: auto会对justify-content产生影响？