Menu alignment - dropdown out of line with menu items - asp.net-core

Question

I am brand new to ASP.Net Core -- I literally started playing with it last night.
I am working on a website for a friend, and he requested a very specific layout for the menu bar at the top of the page:
Home | About | Books and Stories ▼ | Reviews | Other Projects
When I code what I think should be this functionality, I get this:
My code is here:
<ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="About">About</a>
</li>
<li class="dropdown">
Books and Stories <span class="caret"></span>
<ul class="dropdown-menu text-dark">
<li><a asp-controller="BooksAndStories" asp-action="Novels">Novels</a></li>
<li><a asp-controller="BooksAndStories" asp-action="Stories">Short Stories</a></li>
<li><a asp-controller="BooksAndStories" asp-action="WIP">WIP</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Reviews" asp-action="Index">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="OtherProjects" asp-action="Index">About</a>
</li>
</ul>
Can anyone provide me with some direction? Google has been less than useful.
Thanks,
Carthax

Answer 1

Modify .dropdown-toggle in bootstrap.css file under wwwroot/lib/bootstrap/dist/css like below:
.dropdown-toggle {
white-space: nowrap;
display: block;
padding: 0.5rem 1rem;
}