当图片增大尺寸时，如何将项目与导航栏的顶部对齐？

Question

我在这里找到了两个类似的问题，但是似乎没有一个问题能够完全回答我的问题，都尝试了所有问题，但是没有任何效果。（我正在使用bootstrap4）

这是我的html：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
            <div class="container-float">
                    <a class="navbar-brand navbar-left js-scroll-trigger" href="#page-top"><img src="{% static 'media/cookie.jpg' %}"></a>
            </div>
            <div class="container-float">
                <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">Menu<i class="fas fa-bars ml-1"></i></button>
            </div>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav text-uppercase ml-auto">
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#services">Services</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#portfolio">Portfolio</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#about">About</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#team">Team</a></li>
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#contact">Contact</a></li>
                    </ul>
            </div>
</nav>

media / cookie.jpeg文件很大（我网站的徽标），因此，整个导航栏都会扩展，并且无序列表中的链接会与导航栏的中间垂直对齐。我已经尝试了很多方法，包括vertical-align：top，但没有任何效果。

如何将链接对齐到页面/导航栏的顶部，而不是将它们居中？