CSS 网格行 1 以边距开头，但无法弄清楚原因

Question

从未遇到过css网格中的第一行与浏览器窗口不齐平的情况。不知道差距是从哪里来的，但这个页面上的所有其他网格都很好。我需要一个更靠近浏览器窗口边缘的标志。

下面是我的html代码和html附带的css。

<menu>
<asp:HyperLink NavigateUrl="~/Default.aspx" runat="server">
<asp:Image ID="imgLogo" CssClass="Logo" runat="server" ImageUrl="~/Images/LogoOrange.png" />
</asp:HyperLink>
<nav>
<ul>
<li>About Us</li>
<li>Services</li>
<li>Online Estimate</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="PhoneNumber">
<asp:Label runat="server" Text="" />
</div>
</menu>
.Logo {
height: 80px;
margin: 5px 25px 0px 5px;
}
menu {
margin: 0;
display: grid;
grid-template-columns: 1fr 5fr 1fr;
min-width: 1024px;
}
menu nav {
grid-column: 2/3;
display: flex;
align-items: center;
justify-content: flex-end;
}
menu nav ul {
margin: 0;
}
menu nav ul li {
display: inline-block;
padding: 15px;
cursor: pointer;
margin: 0px 10px;
color: black;
font-weight: bold;
font-size: 16px;
}

Answer 1

浏览器正在向您的菜单添加Padding，只需添加Padding:0即可

menu {
margin: 0;
padding:0;
display: grid;
grid-template-columns: 1fr 5fr 1fr;
min-width: 1024px;
}

Answer 2

您必须删除display:flex；

menu nav {
grid-column: 2/3;
display: block;
align-items: center;
justify-content: flex-end;

}