Problem aligning contents of Blazor dropdown-menu

Issue

I have a problem with a dropdown-menu I've added to a Blazor server application, in that the background shading of each dropdown-item doesn't align correctly when placed in the default top-row div.

When I drop the same code in the default counter page, I don't have the problem.

I'm guessing the top-row div is causing inheritance of one or more CSS classes, but as a long-time (20 yrs) C# WinForms developer that's only just starting to look at Blazor and web development, I don't really know where to start correcting this. Can anybody offer me some pointers on where I might be going wrong?

Here's the code taken from MainLayout.razor. The exact same dropdown div block in the counter.razor page works fine, as shown above.

<main>
    <div class="top-row px-4">
        <a href="/home">Home</a>
        <a href="/plans">Plans</a>
        <AuthorizeView>
            <Authorized>
                
            </Authorized>
            <NotAuthorized>
                <div class="dropdown">
                    <a @onclick=this.Toggle class="btn btn-secondary dropdown-toggle" type="button"
                        id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Manage
                    </a>
                    @if (isActive)
                    {
                        <div class="dropdown-menu show" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="#">Sign In</a>
                            <a class="dropdown-item" href="#">Register</a>
                        </div>
                    }
                </div>
            </NotAuthorized>
        </AuthorizeView>
        <a href="/aboutus">About Us</a>
    </div>

Solution

By default, MainLayout.razor also includes the MainLayout.razor.css file (with .top-row style). You probably should look for a solution to your problem there.

Answered By - szmp