如何让一个圆润的div与圆润的导航条相适应？

Question

我想让那个红色的div与导航条的边角和高度相适应。我一直在使用bootstrap组件，并试图适应我想要的东西.如果有一种方法使用一个按钮，而不是一个DIV将被罚款，我只是想让它与导航栏的大小相适应。

这是我的代码片段

.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>