Untitled

<html>
<head>
    <title>The Blog</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <nav class = "navbar">
        <li class="brand"><a href="#">The Blog</a></li>
        <div class="items">
            <li><a href="#">Sign In</a></li>
            <li><a href="#">FAQ</a></li>
            <li><a href="#">About</a></li>
        </div>
    </nav>
</body>
</html>

.navbar{
    display: grid;
    background: #000;
    grid-template-columns: 3fr 1fr;
}

.brand{
    justify-self: start;
    padding: 1em;
    font-weight: 800;
    font-style: 1.2em;
}

.items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template: 1fr auto;
}

.navbar li{
    padding: 1em;
    list-style-type: none;
}

.navbar a{
    color: white;
    text-transform: uppercase;
    text-decoration: none;
}

.navbar li:hover{
    background: white;
}

.navbar li:hover>a{
    color: black;
}