Is there a way to make the red div align perfectly with the corners and height of the navbar? I have been experimenting with Bootstrap components and trying to customize them according to my needs. If using a button instead of a div is an option, that would work too, as long as it fits within the navbar dimensions.
Here is my current progress https://i.sstatic.net/lmqBp.png
This is the desired outcome https://i.sstatic.net/s8HEc.png
Below is a snippet of my code:
.container {
min-height: 100vh;
padding: 2rem 1rem;
}
.navbar {
z-index: -1;
width: 70%;
margin: 0 auto;
border-radius: 20rem;
}
.nav-item {
padding: 0;
}
.book-now {
overflow: visible;
z-index: 100;
background-color: rgba(255, 48, 48, 1);
height: match-parent;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<header class="container">
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">MOTRAVELS</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">CITIES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">PLACES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">EVENTS</a>
</li>
<div id="book-now">
<a class="nav-link" href="">BOOK NOW</a>
</div>
</ul>
</div>
</nav>
</header>