title: Bootstrap 4 dropdown menu translate3d() incorrect position
body: <p>Have a multiple bootstrap 4.4.1 dropdown menus, each in a col which is working fine EXCEPT for the calculated position.
  HTML col Example</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;div class="dropdown"&gt;
          &lt;a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="snl-68778" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" tabindex="0"&gt;&lt;div class="btn-txt"&gt;TEXT&lt;/div&gt;&lt;div class="chevron-wrapper"&gt;&lt;svg class="chevron"&gt;&lt;use xlink:href="/img/chevron-white.svg#chevron"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/div&gt;&lt;/a&gt;
  
          &lt;div class="dropdown-menu" aria-labelledby="snl-68778" style=""&gt;
            &lt;a class="dropdown-item" target="_blank" href="#" tabindex="0"&gt;Link 1&lt;/a&gt;
            &lt;a class="dropdown-item" target="_blank" href="#" tabindex="0"&gt;Link 2&lt;/a&gt;
            &lt;a class="dropdown-item" target="_blank" href="#" tabindex="0"&gt;Link 3&lt;/a&gt;
            &lt;a class="dropdown-item" target="_blank" href="#" tabindex="0"&gt;Link 4&lt;/a&gt;
            &lt;a class="dropdown-item" target="_blank" href="#" tabindex="0"&gt;Link 5&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
     // more columns here
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.btn,
  .dropdown-menu {
      width: 100%;
  }
  .btn{
    display: inline-block;
    padding: 8px 15px;
    border: none;
    background: #E5392A;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
    line-height: 18px;
    text-transform: uppercase;
  }
  .dropdown-menu{
    margin-top: 0;
    border: 0;
    padding: 0 10px;
    background-color: #211D17;
  }
  .chevron-wrapper {
    vertical-align: middle;
    display: inline-block;
    width: 36px;
    height: 26px;
    border-left: 1px solid #fff;
    margin-left: calc(100% - 115px);
    padding-left: 10px;
  }
  .dropdown.show .chevron {
    transform: rotate(90deg);
  }
  .chevron {
    display: inline-block;
    width: 26px;
    height: 26px;
  }
  </code></pre>
  
  <p>I have 5 columns set up and the problem I have is the position of the dropdown menu in the first and last column:</p>
  
  <p>1st: translate3d(5px, -244px, 0px);</p>
  
  <p>5th: translate3d(-5px, -244px, 0px);</p>
  
  <p>There is a 5px shift to the left/right and I have no idea what is causing that. If I reduce the number of cols to 4, I still get the same shift on the first / last columns.</p>
  
  <p>is there a way of forcing the just first number in the calculated translate3d(5px, -244px, 0px) to always be 0? I tried transform: translateX(0), but that overrode the whole translate3d() setting, not just X </p>
  
  <p>Any ideas</p>