```
        <div class="container"> <!--main div-->
            <div>
                <nav class="navbar navbar-light bg-light">
                    <a href="https://wwww.kidsedge.in" class="navbar-brand"><img id="logo" src="logo_white_background.jpg"></img></a>
                    <ul class="navbar-nav list-unstyled">
                        <li class="nav-item">
                            <button><a href="#" class="nav-link">Login</a></button><!--Login Link-->
                        </li>
                        <li class="nav-item ml-2">
                            <button><a href="#" class="nav-link">Explore Live Experiments</a></button><!--Current Available Live Courses Link-->
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </body>

```

This code works fine to give me the desired navbar. However the login and the explore experiments button don't align to the right. In Spite of trying to add mr-auto and mr-right to the ul. Tried doing custom css align right but no response. How do i make the two buttons go the right of the nav bar?