Выровняйте две панели навигации Bootstrap 4

У меня возникла проблема с выравниванием двух панелей навигации, уложенных друг на друга. Ниже приведен мой код. Я хочу выровнять верхнюю панель навигации с нижней панелью навигации. Я добавляю исходное изображение и свой результат кода. Я пробовал разными способами, например, вложить обе панели навигации в одну, но с выравниванием проблем не возникло. Есть ли проблема с кнопками или еще что-то помогите пожалуйста

<nav class = "navbar navbar-expand-md">
    <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
            <ul class = "navbar-nav ml-auto">
                <li class = "nav-item">
                    <a href = "#">
                        <img src = "F:/Theme Development/New folder/facebook.png" style = "margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>

                <li class = "nav-item">
                    <a href = "#">
                        <img src = "F:/Theme Development/New folder/instagram.png" style = "margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>

                <li class = "nav-item">
                    <a href = "#">
                        <img src = "F:/Theme Development/New folder/linkdin.png" style = "margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>

                <li class = "nav-item ">
                    <a href = "#">
                        <img src = "F:/Theme Development/New folder/twitter.png" style = "margin-right:2rem;vertical-align:text-top;height:55px;" />
                    </a>
                </li>


                <li class = "nav-item">
                    <a class = "btn btn-primary" style = "background-color: #685dadfa;border:0px;border-radius:0px;font-size:30px;font-family: inherit"
                        href = "#">
                        <img src = "F:/Theme Development/New folder/lock1.png" style = "vertical-align:sub" /> REGISTER</a>
                </li>
                <li class = "nav-item">
                    <a class = "btn btn-primary" style = "margin-left:1rem;background-color: #179c95;border:0px;border-radius:0px;font-size:30px;font-family: inherit"
                        href = "#">
                        <img src = "F:/Theme Development/New folder/sign_in.png" style = "vertical-align:sub;" /> LOG IN</a>
                </li>
            </ul>
        </div>
    </nav>

    <nav class = "navbar navbar-expand-md navbar-light" style = "background-color:white">

        <a class = "navbar-brand mb-0 h1" style = "font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif" href = "#">Website Logo</a>

        <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarSupportedContent" aria-controls = "navbarSupportedContent"
            aria-expanded = "false" aria-label = "Toggle navigation">
            <span class = "navbar-toggler-icon"></span>
        </button>

        <div class = "collapse navbar-collapse" id = "navbarSupportedContent">
            <ul class = "navbar-nav ml-auto">
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Home
                    </a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Post a Job</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Post Resume</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Blog</a>
                </li>
                <li class = "nav-item">
                    <a class = "nav-link" href = "#">Contact Us</a>
                </li>
            </ul>
        </div>
        </div>
        <!--/div-->
    </nav>