Q:

Why is my dropdown label split into 2 lines in Chrome?

I am trying to put some padding to the right item of the navigation bar and when I reload the page in Chrome, the name is on 1 line and the down-arrow is on the line below the name.
When I click it, the problem is resolved completely until the next reload or resize. I have tried to use Firefox but I did not face the same issue, everything goes right on Firefox. 
I wonder if there is a way to get rid of this issue whenever I reload the page in Chrome?
Moreover, is there any other way that I could move the right-place nav-item to the left a little bit without using the padding?
And when the name of Dropdown menu is too short (like 5 or 6 characters), the menu only shows part of it, how do I position the menu?
The problem when reload page on Chrome:

The problem disappears when you click on the menu:

The issue is not on Firefox:

I tried using a short label:

Here's my code
<style>
  #zzz {
    padding-right: 1.5%;
  }
  .navbar-brand {
    padding-left: 1.5% ;
  }
  .nav-link {
    color: #b7c9cc;
  }
  ul.navbar-nav a:hover {
    color: white;
  }
  .navbar-nav > li > .dropdown-menu > .dropdown-item:hover {
    background-color: #202e3e;
  }
  navbar-tooggler {
    color: white;
  }
  .custom-toggler.navbar-toggler {
    border-color: transparent;
    outline: none;
  }
  .custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
</style>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sth</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="container-fullwidth">
      <nav class="navbar navbar-expand-lg" style="background-color: #202e3e">
        <a class="navbar-brand" href="#">
          <img src="./assets/logo.png" width="32" height="32" alt="">
        </a>

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

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Nav<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nav</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Nav</a>
            </li>
          </ul>
  <!--  -->
          <ul class="navbar-nav" id="zzz">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown Menu
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Something</a>
                <a class="dropdown-item" href="#">Something</a>
                <a class="dropdown-item" href="#">Something</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Log Out</a>
              </div>
            </li>
          </ul>

  <!--  -->
        </div>
      </nav>
    </div>
  </body>
</html>

A:

For your padding just use px than %
#zzz {
    padding-right: 10px;
  }

For your second issue since you're using bootstrap it comes with it's own css which is left aligning the menu all the way to the edge. You add this to override the issue.
.dropdown-menu {
    right: 0;
    left: inherit;
}

