Центрировать марку навигационной панели на маленьком экране

Center Navbar Brand на мобильных устройствах. Кажется, я не могу сосредоточить свой бренд на навигационной панели на мобильном устройстве ... Я пытаюсь безрезультатно использовать медиа-запросы и атрибуты flexbox ... Достижимо ли это с помощью классов начальной загрузки или настраиваемого css ??? Спасибо! :)

<nav class = "navbar navbar-expand-lg navbar-default fixed-top nav-menu navbar- 
light bg-white">
<div class = "container">
<div class = "header-border">
<a class = "navbar-brand hidden-sm-down" href = "index.html">
<img src = "/images/logo.png" alt = "masslogo">
</a>
<a class = "navbar-brand-two hidden-md-up" href = "index.html">
<img src = "/images/mpsmall.png" alt = "masssmalllogo">
</a>

</div>
<button class = "navbar-toggler nav-button" type = "button" data-toggle = "collapse" data-target = "#myNavbar">
<div class = "bg-dark line1"></div>
<div class = "bg-dark line2"></div>
<div class = "bg-dark line3"></div>
</button>
<div class = "collapse navbar-collapse" id = "myNavbar">
<ul class = "navbar-nav ml-auto">
<li class = "nav-item">
<a href = "#" class = "nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class = "nav-item">
<a href = "#" class = "nav-link m-2 menu-item">How We Help</a>
</li>
<li class = "nav-item">
<a href = "#" class = "nav-link m-2 menu-item">Blog</a>
</li>
<li class = "nav-item">
<a href = "#" class = "nav-link m-2 menu-item">Contact</a>
</li>
<li class = "nav-item"><div class = "dropdown"> <a class = "nav-link m-2 dropdown-toggle"
href = "#" role = "button" id = "dropdownMenuLink" data-toggle = "dropdown" aria-haspopup = "true"
aria-expanded = "false"> Resources </a> <div class = "dropdown-menu" aria-labelledby = "dropdownMenuButton">
<a class = "dropdown-item" href = "#">Knowledge base</a> <a class = "dropdown-item"
href = "#">Video tutorials</a> <a class = "dropdown-item"
href = "#">Forms</a> </div></div></li>
</ul>
<ul class = "navbar-nav navbar-btns">
<a class = "search" href = "/search"><svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 1024 1024" role = "img">
<title>Search</title>
<path d = "M914.876 846.934l-226.894-226.92c93.082-124.27 83.508-301.176-29.516-414.14-61.952-61.97-143.146-92.954-224.366-92.954s-162.414 30.984-224.384 92.954c-123.922 123.922-123.922 324.812 0 448.768 61.97 61.934 143.146 92.936 224.366 92.936 66.918 0 133.624-21.368 189.772-63.402l226.952 226.936 64.07-64.178zm-480.794-190.038c-60.536 0-117.486-23.604-160.238-66.414-88.38-88.362-88.38-232.174-.018-320.538 42.828-42.812 99.72-66.398 160.298-66.398 60.536 0 117.486 23.56 160.256 66.398 88.32 88.38 88.32 232.174 0 320.538-42.87 42.81-99.762 66.414-160.298 66.414z">

</path></svg></a><li class = "nav-item login"><a class = "btn btn-success
btn-cust" href = "https://masspay.myisolved.com/UserLogin.aspx?ReturnUrl=%2f"><span class = "fa fa-user-circle mr-1"></span>Client Login</a></li></ul>
</div>

</nav>