How to expand nav-item to fill dropdown menu

Question

I've added some padding to the standard Bootstrap 4 dropdown class so that the menu looks a little cleaner. However, now the nested links won't fill the space (see picture below). How do I make the links fill to the full width of the dropdown menu?

Here is the HTML:

<header class="site-header">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <div class="media">
                    <a class="navbar-brand mr-5" href="/"><img id="brand"
                            src="#" alt="EONS" /></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle"
                        aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="navbarToggle">
                    <div class="navbar-nav mr-auto" id="main-nav">
                        <a class="nav-item nav-link" href="#">Home</a>
                        <a class="nav-item nav-link" href="#">Latest News</a>
                        <a class="nav-item nav-link" href="#">Explore the Data</a>
                    </div>
                    <div class="navbar-nav">
                        {% if user.is_authenticated %}
                        <!-- Account Settings Dropdown Menu -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-toggle="dropdown">Account</a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <span class="nav-item ml-2">Signed in:</span>
                                <strong class="ml-2">{{ user.email }}</strong>
                                <div class="dropdown-divider"></div>
                                    <a class="nav-link" href="{% url 'user-profile' %}">Your profile</a>
                                <a class="nav-link" href="{% url 'data-upload' %}">Upload data</a>
                                <div class="dropdown-divider"></div>
                                <a class="nav-link" href="{% url 'user-logout' %}">Log out</a>
                            </div>
                        </li>
                        <a class="nav-item nav-link" href="{% url 'user-logout' %}">Sign Out</a>
                        {% else %}
                        <div class="nav-item nav-link">
                            <a class="btn btn-login btn-sm" href="{% url 'user-login' %}">Log In</a>
                        </div>
                        <a class="nav-item nav-link btn" href="{% url 'user-registration' %}">Register</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </nav>
    </header>

And the relevant parts of the CSS that I've added:

.site-header .navbar-nav .nav-link {
    font-size: 1.1rem;
    color: #cbd5db;
    padding-right: 10;
}

.site-header .navbar-nav .nav-link:hover {
    color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
    font-weight: 500;
    text-decoration: underline;
}

.dropdown-menu {
    padding-right: 5rem !important;
    border-radius: 0px !important;
}

.dropdown-menu .nav-link {
    color: #000 !important;
    font-size: 0.9rem !important;
}

.dropdown-menu .nav-link:hover {
    background: #eee;
}

Answer 1

Try specifying a width for the dropdown-menu instead of the padding-right for example:

.dropdown-menu {
  width: 200px !important
}

You can then change the width until you get the look you want.