Border positioning through CSS

I am trying to get the orange border on the blue border (only the orange border should move). I have seen this many times on websites but I could not get it without removing the padding of the parent div.

nav.navbar.navbar-light {
  border-radius: 0;
  border-bottom: 1px solid #97B6D0;
  /*box-shadow: 0px 1px 2px #5286B1;*/
}
nav.navbar.navbar-light > ul.nav.navbar-nav > li.nav-item.active > a.nav-link {
  color: #5286B1;
  border-bottom: 2px solid #F7A411;
}

<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" />
<header class="container">
  <nav class="navbar navbar-light">
    <a class="navbar-brand" href="#">
      <img src="img/Xeeva_only_xeeva_sign_h_38 copy.png" width="43" height="38" alt="" />
    </a>
    <ul class="nav navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Dashboard <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Opportunities</a>
      </li>
    </ul>
  </nav>
</header>

Here is the code on JS fiddle:

JSFiddle.