导航栏引导中的Div打破中心

我有一个导航栏,它以以下代码为中心:

        <nav class="navbar navbar-light bg-light text-primary navbar-personalized w-100 justify-content-center navbar-personalized">
        <div class="row">
            <a class="navbar-brand">
                My WebSite
            </a>
        </div>
    </nav>

现在,我想在其中添加一个可点击的div:

   <nav class="navbar navbar-light bg-light text-primary w-100 justify-content-center navbar-personalized">
      <div class="row">
        <a class="navbar-brand">
          My Web Site
        </a>

          <div id="messageAdministrateur" onclick="alert('This is an alert')" style="color:red;text-align: center;width: 100%;">
          <b>WARNING, NEW MESSAGE<br>CLICK</b>
          </div>
            </div>
    </nav>

I would like to center the both but only WARNING, NEW MESSAGE CLICK is centered and not My Web Site. How to center the both ? This is a working example : https://jsfiddle.net/g2ea36rn/