Estoy aprendiendo grid layout en CSS, y mi grid es de 12 columnas y 12 filas con longitud auto. Tengo un header que ocupa desde la primera columna a la última columna, y dentro del header un nav que quiero que ocupe desde la séptima columna hasta la última, pero cuando escribo el código, el nav se posiciona desde la primera columna, y no entiendo por qué. El nav dentro tiene una ul con display flex, no se si tenga algo que ver, creo que no, porque el problema en sí radica en el nav, pero aquí les dejo mi código HTML y CSS, la clase del header es #main-header, y la clase del nav es #main-header-nav:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Jesus Diaz">
<meta name="description" content="Portfolio Web Software Design">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="cache-control" content="no-cache"/>
<link rel="stylesheet" href="index.css">
<title>Jesus Diaz</title>
</head>
<body>
<div class="main">
<header id="main-header">
<nav id="main-header-nav">
<ul id="main-header-nav-ul">
<li class="List"><a href="" class="Link mainNavUlA">About</a></li>
<li class="List"><a href="" class="Link mainNavUlA">Experience</a></li>
<li class="List"><a href="" class="Link mainNavUlA">Work</a></li>
<li class="List"><a href="" class="Link mainNavUlA">Contact</a></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
@font-face {
font-family: "Roboto-Medium";
src: url('fonts/Roboto-Medium.ttf');
}
@font-face {
font-family: "CaviarDreams";
src: url('fonts/CaviarDreams.ttf');
}
@font-face {
font-family: "CaviarDreams_Bold";
src: url('fonts/CaviarDreams_Bold.ttf');
}
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
font-size: 65px;
background-color: #03051C;
display: flex;
justify-content: center;
align-items: center;
}
.main {
/* width: 73.21%; */
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(12, auto);
grid-template-rows: repeat(12, auto);
grid-gap: 20px
}
#main-header {
height: 23px;
grid-column: 1 / -1;
position: relative;
top: 45px;
}
#main-header-nav {
font-family: "Roboto-Medium";
font-weight: 700;
font-size: 0.27em;
font-weight: lighter;
width: 40.5%;
grid-column: 7 / -1;
}
#main-header-nav-ul{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.List {
list-style: none;
}
.Link {
color: rgba(171, 201, 227, 0.6);
text-decoration: none;
transition: color .3s linear;
}
.mainNavUlA:hover {
color: #6CBDF0;
}
Lo que quiero es situar el nav desde la columna 7 hasta la columna -1, pero este se posiciona es en la columna 1.