Div in navbar Bootstrap break the center

Question

I have a navbar which is centered perfectly with this code :

        <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>

Now I want to add a div inside which is clickable :

   <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/

Answer 1

You need to create columns after rows. So just add for each div a col-12 and style the text centered.

<div class="row">
   <div class="col-12">
      <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%;">
  <center><b>WARNING, NEWdd MESSAGE</b></center><b><center>CLICK</b></center>
  </div>
     </div>
    </div>


.navbar-personalized{
  position: absolute !important;
  top: 0;
  left: 0px;
}

.row {
  text-align: center;
}