JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="alert alert-danger alert-dismissible fade show" role="alert" style="margin-bottom: 0">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  this is a test
</div>
<nav class="navbar navbar-toggleable navbar-light" style="background: #aaa;">
  text here
</nav>
<p>
  The nav bar should be 100% width but upon inspection you see there is "margin" on the right. Something having to do with flexbox and the relative position of the close button is pushing the flex'ed box to the left. 
</p>
<hr />
<div class="alert alert-danger alert-dismissible fade show" role="alert" style="margin-bottom: 0">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  text here but with right "margin" issue
</div>
<nav class="navbar navbar-toggleable navbar-light" style="background: #aaa; width:100%">
  text here, width 100% but adds space between elements
</nav>
<p>
  Adding width 100% should fix the issue but creates yet another with vertical spacing between the two elements. 
</p>

<hr />
<div class="alert alert-danger alert-dismissible fade show" role="alert" style="margin-bottom: 0">
  <button id="close-fix" type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  This is with position and padding reset to initial values on the close button
</div>
<nav class="navbar navbar-toggleable navbar-light" style="background: #aaa;">
  text here
</nav>
<p>
  Removing the positioning and padding seems to fix it. It appears that the button is too tall for its container and is causing issues with flexbox items on the next line. 
</p>
<hr />
<div class="alert alert-danger alert-dismissible fade show" role="alert" style="margin-bottom: 0">
  <button...

SCSS

/* .alert-dismissible {
  position: relative;
  
  .close {
    position: absolute;
    top: 0;
    right: 0;
  }
} */