Bootstrap Drop-Down Menu Content is Too Big

HTML-CSS
1

I’m having some trouble. I’m trying to put the drop-down link below a text to the right. However, I’m having trouble with the “content”. Maybe it’s the padding or margin but I’m not really sure because I keep changing them and nothing happens.
Screenshot (5)

As you can see from the screenshot. I have a container that has several images where I can hover and click. The problem is that this “blue” thing doesn’t let me hover or click only from halfway down.

How can I fix this? I’m still learning HTML by the way.

This is the code for the drop-down menu:

<div class="resume">
    <nav class="navbar-expand-md navbar-dark fixed-top">
    <button aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav ml-auto justify-content-end mt-5">
            <li class="nav-item dropdown">
                <a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdownMenuLink" role="button">
                    Resume
                </a>
                <div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu bg-dark">
                    <a class="dropdown-item" style="color: white" href="project1.html">.pdf</a>
                    <a class="dropdown-item" style="color: white" href="project2.html">.word</a>
                </div>
            </li>
        </ul>
    </div>
    </nav>
    </div>
2

Please put your CSS here.

3 
 .resume .navbar-nav{
     position: relative;
     padding: 110px 40px;
 }

 .resume .dropdown-menu{
     min-width: 5rem;
     margin: -.5rem 0 0;
     white-space: normal;
 }
 .resume .dropdown-menu a:hover{
     background-color: #545b62;
     background-image: none;
 }