未使用grid-column-start设置嵌套的网格元素

Question

我在 header 中创建一个网格，然后在 ul 标签中创建一个嵌套网格，以便将每个 li 标签放在一个现在使用嵌套网格创建列。借助develepor工具，我可以看到正确创建的4列，没有将每个 li 标记放置在带有 grid-column-start 的每个相应列中。

header {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    border: 3px solid black;
}
header h1 {
    grid-column-start: 2;
}
header img {
    width: 50%;
    grid-column-start: 1;
}
header nav {
    grid-column-start: 5;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}
header nav ul li:first-child{
    grid-column-start: 1;
    border: 2px solid black; 
}
header nav ul li:nth-child(2){
    grid-column-start: 2; 
}
header nav ul li:nth-child(3){
    grid-column-start: 3; 
}
header nav ul li:nth-child(4){
    grid-column-start: 4; 
}

如您在屏幕快照中所见，我所有的 li 标签都卡在一个栏中，我想将它们放在每个单独的栏中，请帮帮我。