responsive menu with height 60px and full height borders - css

Question

I wan to have a menu with a 1px gray border-bottom below the navbar and also gray borders around nav items and at right of the logo. The orange area is the content area, like:
Im using bootstrap 4 responsive menu. But I would like that the menu occupies a height of 60px and that has borders with full height. A full height border at right of the "Logo", and then full height borders around the nav items. But its not working properly, Im getting this: https://jsfiddle.net/xxub3zvp/1/.
The borders of the menu items and the border at right of the logo are not occupying the full height. Also the gray border bottom of the menu is not occupying the full width.
Html:
<div class="container-fluid px-0 py-0">
<nav class="navbar navbar-expand-md navbar-light">
<a class="logo font-weight-bold text-primary" href="#">Logo</a>
<button class="navbar-toggler mr-3" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="menu_container">
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav ml-auto d-flex align-items-lg-center">
<li class="nav-item">
<a class="nav-link" href="#">Item 0</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="
false">
<i class="fa fa-user" aria-hidden="true"></i> Jan
</a>
<div class="dropdown-menu" aria-labelledby="userDropdown">
<a class="dropdown-item text-gray" href="#">i1</a>
<a class="dropdown-item text-gray" href="#">i2</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
<section style="background-color:orange;">
content
</section>
css:
.menu_container {
position: relative;
width: 100%;
border-bottom:1px solid gray;
height:60px;
}
div.dropdown-menu {
left: auto;
right: 0;
}
.nav-item {
border-left: 1px solid gray;
padding: 0.3rem 0.75rem;
}
.navbar{
border-right: 1px solid gray;
}
.logo{
border-right:1px solid gray;
padding: 0 1rem;
height: 45px;
line-height: 45px;
}
.dropdown-menu {
border-radius: 0;
border-top: 0;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.navbar {
padding:0;
}

Answer 1

Update/Add your css with following css
.nav-item {
border-left: 1px solid gray;
padding: 0 0.75rem;
line-height: 60px;
}
.logo {
border-right:1px solid gray;
padding: 0 1rem;
line-height: 60px;
}
.nav-link {
padding: 0 1rem;
}
https://jsfiddle.net/xxub3zvp/4/