How can I put a smaller div's border-bottom on top of another bigger div's border-bottom?

Question

I simply have 1 smaller div (navigation menu) in a bigger div (header).

And i need the border-bottom of the smaller div to be on the same height as the border-bottom of the bigger div.

I've attached to pictures:

have

want

.main-navigation-link .main-navigation-link-text {
  border-bottom: 6px solid #F18000;
  color: #F18000;
  padding-bottom: 7px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-main {
    border-bottom: 7px solid red;
}

<div class="nav-main fixed-header">              
  <div class="main-navigation" id="mainNavigation" data-flyout-menu="true">
    <div class="container">
    <nav class="nav main-navigation-menu">

        <a class="nav-link main-navigation-link">
            <div class="main-navigation-link-text">
                <span itemprop="name">Dönermesser</span>
            </div>
        </a>

    </nav>
    </div>
   </div>
</div>

JSFiddle

Answer 1

Try to set margin on smaller div margin-bottom: -5px; (or value of border thickness of bigger div)

  .main-navigation-link .main-navigation-link-text {
    border-bottom: 6px solid #F18000;
    color: #F18000;
    padding-bottom: 6px;
    margin-bottom: -6px;
  }

  .nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }
.nav-main {
    border-bottom: 6px solid red;
}

<div class="nav-main fixed-header"> 
  <div class="main-navigation" id="mainNavigation" data-flyout-menu="true">
    <div class="container">
      <nav class="nav main-navigation-menu">
        <a class="nav-link main-navigation-link">
            <div class="main-navigation-link-text">
                <span itemprop="name">Dönermesser</span>
            </div>
        </a>
      </nav>
    </div>
  </div>
</div>