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

我在这里发现了几个类似的问题，但似乎没有一个能完全回答我的问题，我尝试了所有的问题，但没有任何效果。（我正在使用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文件相当大（我的网站的徽标），因此整个导航栏会展开，无序列表中的链接会垂直对齐到导航栏的中间。我尝试了很多方法，包括垂直对齐：top，但都没有效果

<>我如何对齐链接到页面/Navar的顶部，而不是在中间？

如果你使用：

display: flex;
align-items: flex-start;

在导航栏上，它会将链接推到顶部：

---

请附带一个工作代码段，如果您有一个代码段清楚地显示了您的问题，那么它将比没有代码段的代码段更快地解决您的问题。我不太确定为了使它成为一个工作代码段，我必须包含哪些部分，因为我使用了一些模板css和html，还有，我还不太了解那里发生的一切：/创建一个与您的机器完全相同的问题片段，对于片段创建，您可以使用codepen.io，对于图像上传，您可以使用Imgur。但是有上千行css，我不知道为片段选择哪一行是的，percisely@daniel_knights我也将其添加到我的项目中，并且成功了，非常感谢：D如果你想写一个简短的答案，我可以验证它。